Переключение блоков в зависимости от select

@cybertank · Регистрация: 07.08.2012

Студворк — интернет-сервис помощи студентам

Здравствуйте,
Есть форма

HTML5
1
2
3
4
<select name="game">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
</select>

Как сделать так, чтобы при выборе 1 показался один контент снизу, а при выборе 2 - другой (без перезагрузки страницы).

@Dolphin · 03.10.2012, 21:32

JavaScript
1
2
3
4
$('select[name="game"]').change(function(){
    var el = $(this).val();
    alert(el);
});

А дальше сам

@cybertank · 05.10.2012, 14:31 **[ТС]**

Сообщение от Dolphin

JavaScript
1
2
3
4
$('select[name="game"]').change(function(){
    var el = $(this).val();
    alert(el);
});

А дальше сам

Если не сложно, можете описать подробнее. Допустим если value=1, то выводим текст "текст1", а если value=2, то "текст2".

@Soldado · 05.10.2012, 15:18

В зависимости от значения изменяйте свойство display для двух дивов в которых содержится соответствующий контент:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Селектор выбирает блоки</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('select[name="game"]').change(function(){
    var el = $(this).val();
    if (el==1)
        { 
          $('#div2').css('display','none');
          $('#div1').css('display','block')
        }
    else 
        {
         $('#div1').css('display','none');
         $('#div2').css('display','block');
        }
});
}); /*end ready*/
</script>
<style>
#div2 {
display:none;
}
</style>
</head>
 
<body style="margin:200px">
<select name="game">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
</select><br/><br/><br/>
<div id="div1">текст1</div>
<div id="div2">текст2</div>
</body>
</html>

Если блоков больше (десятки) то универсальный способ такой (если Вы не предпочтёте загружать их не сразу (даже если они не видны), а по мере необходимости с помощью load или из БД):

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Селектор выбирает блоки</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('select[name="game"]').change(function(){
    var el = $(this).val();
          $('#total div').css('display','none');
          $('#div'+el).css('display','block');
    
});
}); /*end ready*/
</script>
<style>
#total div {
display:none;
}
 
</style>
</head>
 
<body style="margin:200px">
<select name="game">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br/><br/><br/>
<div id="total">
<div id="div1" style="display:block;">текст 1</div>
<div id="div2">текст 2</div>
<div id="div3">текст 3</div>
<div id="div4">текст 4</div>
<div id="div5">текст 5</div>
</div>
</body>
</html>

@Dolphin · 05.10.2012, 16:35

Сообщение от cybertank

Если не сложно, можете описать подробнее. Допустим если value=1, то выводим текст "текст1", а если value=2, то "текст2".

А вам нужно просто текст какой то вывести или содержимое блоков менять? или отображение блоков

@Wow4ig · 22.02.2013, 14:34

Сообщение от Dolphin

А вам нужно просто текст какой то вывести или содержимое блоков менять? или отображение блоков

У меня как раз такая проблема. В зависимости от значения value, необходимо изменять содержимое следующего select-а (который изначально виден и у него уже есть какие-то значения). Поможете?

28.10.2013, 12:27

Классный код, все работает! Вопрос! Есть ли возможность эту функцию поправить еще так, чтобы она работала на несколько селектов с разными именами? Спасибо заранее!

Добавлено через 22 минуты
Я так понимаю что достаточно из функции стереть имя селекта?

@ipolekhin · 19.07.2016, 00:26

Вечер добрый. С Jquery никогда не работал)
С переключением блоков в зависимости от select разобрался.
Использовал для фильтра. А как теперь его зафиксировать.
Например выбрали значение "3", показался какой-то контент, нажали применить.
после перезагрузки выглядит так <option selected="selected" value="3">3</option>
А как сделать, чтобы контент "3" остался видимым?
Спасибо.

Новые блоги и статьи Все статьи Все блоги /
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20%	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .

css75
	28.10.2013, 12:27
	Классный код, все работает! Вопрос! Есть ли возможность эту функцию поправить еще так, чтобы она работала на несколько селектов с разными именами? Спасибо заранее! Добавлено через 22 минуты Я так понимаю что достаточно из функции стереть имя селекта?

@ipolekhin 0 / 0 / 0 Регистрация: 29.11.2014 Сообщений: 18
	19.07.2016, 00:26
	Вечер добрый. С Jquery никогда не работал) С переключением блоков в зависимости от select разобрался. Использовал для фильтра. А как теперь его зафиксировать. Например выбрали значение "3", показался какой-то контент, нажали применить. после перезагрузки выглядит так <option selected="selected" value="3">3</option> А как сделать, чтобы контент "3" остался видимым? Спасибо. 0

Переключение блоков в зависимости от select

Решение