Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.89/56: Рейтинг темы: голосов - 56, средняя оценка - 4.89
cybertank
0 / 0 / 0
Регистрация: 07.08.2012
Сообщений: 55
1

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

03.10.2012, 20:07. Просмотров 10357. Ответов 7
Метки нет (Все метки)

Здравствуйте,
Есть форма
HTML5
1
2
3
4
<select name="game">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
</select>
Как сделать так, чтобы при выборе 1 показался один контент снизу, а при выборе 2 - другой (без перезагрузки страницы).
0
Лучшие ответы (1)
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
03.10.2012, 20:07
Ответы с готовыми решениями:

Показ блоков в зависимости от выбора select
&lt;select id=&quot;form1&quot;&gt; &lt;option value=&quot;knigi&quot;&gt;Книги&lt;/option&gt; &lt;option...

Переключение блоков
Приветствую, всех! :help: Есть блок с тремя кнопками. Нужно чтоб при загрузки страницы...

Как отображать определенные данные в <select> в зависимости от значений в другом <select>?
Здравствуйте! У меня на страницу есть два &lt;select&gt;. В каждом из них располагаются даты в формате...

Изменение вместимого select-a в зависимости от выбора из другого select-a
У меня есть 2 селекта. В первом 2 варианта (&quot;символы&quot;,&quot;цифры&quot;). Подскажите как сделать чтобы если...

Select - переключение правым кликом на следующий option?
Можно ли сделать так, чтобы при клике правой кнопкой мыши на элементе select, в этом элементе...

7
Dolphin
812 / 795 / 201
Регистрация: 21.09.2012
Сообщений: 2,646
03.10.2012, 21:32 2
Javascript
1
2
3
4
$('select[name="game"]').change(function(){
    var el = $(this).val();
    alert(el);
});
А дальше сам
1
cybertank
0 / 0 / 0
Регистрация: 07.08.2012
Сообщений: 55
05.10.2012, 14:31  [ТС] 3
Цитата Сообщение от Dolphin Посмотреть сообщение
Javascript
1
2
3
4
$('select[name="game"]').change(function(){
    var el = $(this).val();
    alert(el);
});
А дальше сам
Если не сложно, можете описать подробнее. Допустим если value=1, то выводим текст "текст1", а если value=2, то "текст2".
0
Soldado
731 / 722 / 137
Регистрация: 28.06.2012
Сообщений: 1,318
Записей в блоге: 4
05.10.2012, 15:18 4
Лучший ответ Сообщение было отмечено как решение

Решение

В зависимости от значения изменяйте свойство 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>
3
05.10.2012, 15:18
Dolphin
812 / 795 / 201
Регистрация: 21.09.2012
Сообщений: 2,646
05.10.2012, 16:35 5
Цитата Сообщение от cybertank Посмотреть сообщение
Если не сложно, можете описать подробнее. Допустим если value=1, то выводим текст "текст1", а если value=2, то "текст2".
А вам нужно просто текст какой то вывести или содержимое блоков менять? или отображение блоков
0
Wow4ig
4 / 4 / 0
Регистрация: 19.07.2012
Сообщений: 12
22.02.2013, 14:34 6
Цитата Сообщение от Dolphin Посмотреть сообщение
А вам нужно просто текст какой то вывести или содержимое блоков менять? или отображение блоков
У меня как раз такая проблема. В зависимости от значения value, необходимо изменять содержимое следующего select-а (который изначально виден и у него уже есть какие-то значения). Поможете?
0
css75
0 / 0 / 0
Регистрация: 25.10.2013
Сообщений: 1
28.10.2013, 12:27 7
Классный код, все работает! Вопрос! Есть ли возможность эту функцию поправить еще так, чтобы она работала на несколько селектов с разными именами? Спасибо заранее!

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

Добавление полей в зависимости от выбора <select>
http://www.avito.ru/astrahan В разделе поиска, при выборе необходимого раздела мгновенно...

Выбор input в зависимости от выбора select
Есть: input id=&quot;editbox1&quot;-ширина; input id=&quot;editbox2&quot;-высота; select id=&quot;combobox3&quot;; select...

Показать элементы в зависимости от значения select
Здраствуйте, подскажите, как моно осуществить следующее: Есть селект со значениями от 1 до 10, в...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.