Отслеживать 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, да, все работает, спасибо.

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@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