Отслеживать change нескольких select

@Wir2al · Регистрация: 22.09.2010

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

Привет.

Задача: в зависимости от выбранного аэропорта отображать/скрывать селектор терминала, причем несколько раз на одной странице.

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
39
40
41
42
43
44
<div id="start" class="airport">
    <select id="start-airport">
        <option>Внуково</option>
        <option>Домодедово</option>
        <option>Шереметьево</option>
    </select>
    <select id="start-terminal" style="display: none;">
        <option>Терминал B</option>
        <option>Терминал C</option>
        <option>Терминал D</option>
        <option>Терминал E</option>
        <option>Терминал F</option>
    </select>
</div>
 
<div id="abc" class="airport">
    <select id="abc-airport">
        <option>Внуково</option>
        <option>Домодедово</option>
        <option>Шереметьево</option>
    </select>
    <select id="abc-terminal" style="display: none;">
        <option>Терминал B</option>
        <option>Терминал C</option>
        <option>Терминал D</option>
        <option>Терминал E</option>
        <option>Терминал F</option>
    </select>
</div>
 
<div id="finish" class="airport">
    <select id="finish-airport">
        <option>Внуково</option>
        <option>Домодедово</option>
        <option>Шереметьево</option>
    </select>
    <select id="finish-terminal" style="display: none;">
        <option>Терминал B</option>
        <option>Терминал C</option>
        <option>Терминал D</option>
        <option>Терминал E</option>
        <option>Терминал F</option>
    </select>
</div>

Так не работает. Вернее работает, но скрывается/отображается только селект в первом диве.

JavaScript
1
2
3
4
5
6
7
$('.airport select:nth-child(1)').live('change', function () {
    if ($('.airport select:nth-child(1)').val() == 'Шереметьево') {
        $('.airport select:nth-child(2)').css('display', '');
    } else {
        $('.airport select:nth-child(2)').css('display', 'none');
    }
});

@Soldado · 07.10.2012, 15:14

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

Задача: в зависимости от выбранного аэропорта отображать/скрывать селектор терминала, причем несколько раз на одной странице.

А детальнее объяснить можете? Выбрал я в самом верхнем "Внуково", что должно скрыться, а что показаться? Из вашего поста и скрипта ничего не понять.

@Wir2al · 07.10.2012, 15:39 **[ТС]**

Soldado, http://podorozhny.ru/devcenter/sandbox/select.html

@Soldado · 07.10.2012, 15:51

Я увидел, что есть, а что должно быть? ~~Уточняющая переписка утомляет.~~

Сейчас терминалы появляются только если выбран Шереметьево, а когда остальные то терминалов нет....
Почему Вы не написали, что хотите получить?
Очень трудно ответить на вопрос: "Сейчас всё работает не так, а как сделать чтобы было как я хочу?"

Вам нужен универсальный скрипт, чтобы для всех блоков работал как для первого?

Задача то плёвая, если раскажите как должно быть!

id- индивидуальный идентификатор, не может быть один и тот же у нескольких элементов

@Wir2al · 07.10.2012, 16:00 **[ТС]**

Soldado, обновите страницу, в тот момент, когда вы смотрели, я ещё не успел дописать её (id был один на всех после копипаста блоков).

Попробую объяснить ещё разочек суть задачи.
На странице есть n-ное количество дивов, каждый из которых состоит из двух селекторов.
Первый селектор - аэропорт. Второй - терминал. Второй селектор отображать, только если выбран аэропорт Шереметьево.
Собственно этот функционал я уже сделал, но для одного блока:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<select id="airport">
    <option>Внуково</option>
    <option>Домодедово</option>
    <option>Шереметьево</option>
</select>
<select id="terminal" style="display: none;">
    <option>Терминал B</option>
    <option>Терминал C</option>
    <option>Терминал D</option>
    <option>Терминал E</option>
    <option>Терминал F</option>
</select>

JavaScript
1
2
3
4
5
6
7
$('#airport').live('change', function () {
    if ($('#airport').val() == 'Шереметьево') {
        $('#terminal').css('display', '');
    } else {
        $('#terminal').css('display', 'none');
    }
});

Блоки — это точки маршрута, редактируемого пользователем на странице. Точек может быть сколько угодно (минимум 2), добавляются нажатием на кнопку. Отслеживать с помощью jquery live естественно нужно все селекторы аэропортов. Вопрос: как это осуществить? Дублировать код выше добавив id блокам и указывая их в скриптах?

Добавлено через 1 минуту
Ospin, кстати, у нас вопросы одинаковые, мне тоже нужно производить действия для множества элементов, имеющих один класс.

@Soldado · 07.10.2012, 16:17

Меняйте всё на class и используйте относительный поиск. А именно отсчёт открываемого селекта ведите от выбранного селекта, вот так (скрипт записать между тегами head, после подключения библиотеки):

JavaScript
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
$(document).ready(function(){
            $('.airport').live('change', function () {
                if ($(this).val() == 'Шереметьево') {
                   $(this).next('.terminal').css('display', '');
                } else {
                    $(this).next('.terminal').css('display', 'none');
                }
            });
 });/*end  ready*/          
        </script>

Демо-страница

@Wir2al · 07.10.2012, 16:18 **[ТС]**

Soldado, да, все работает, спасибо.

Новые блоги и статьи Все статьи Все блоги /
Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .	Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.

@Wir2al 14 / 14 / 2 Регистрация: 22.09.2010 Сообщений: 227
	07.10.2012, 15:39 [ТС]
	Soldado, http://podorozhny.ru/devcenter/sandbox/select.html 0

@Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4
	07.10.2012, 15:51
	Я увидел, что есть, а что должно быть? ~~Уточняющая переписка утомляет.~~ Сейчас терминалы появляются только если выбран Шереметьево, а когда остальные то терминалов нет.... Почему Вы не написали, что хотите получить? Очень трудно ответить на вопрос: "Сейчас всё работает не так, а как сделать чтобы было как я хочу?" Вам нужен универсальный скрипт, чтобы для всех блоков работал как для первого? Задача то плёвая, если раскажите как должно быть! id- индивидуальный идентификатор, не может быть один и тот же у нескольких элементов 1

@Wir2al 14 / 14 / 2 Регистрация: 22.09.2010 Сообщений: 227
	07.10.2012, 16:18 [ТС]
	Soldado, да, все работает, спасибо. 0

Опции темы