Фильтр значений в <select>

@Sega28 · Регистрация: 22.05.2012

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

Доброго времени суток!
Как сделать фильтр по значениям из первого <select> в другом <select> к пример:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<select> 
<option value="1">Белый</option> 
<option value="2">Черный</option> 
<option value="3">Серый</option> 
</select>
<select> 
<option value="4">Белая модель 1</option> 
<option value="5">Белая модель 2</option> 
<option value="6">Черная модель 1</option> 
<option value="7">Черная модель 2</option> 
<option value=8">Серая модель 1</option> 
<option value=9">Серая модель 2</option> 
</select>

выбираем цвет белый остаться только белые модели, и т.п

@Lazy_Den · 13.05.2015, 12:12

Sega28, без дополнительный атрибутов, которые помогут фильтровать, делать и не удобно, и сложнее. Поэтому предлагаю такой вариант:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<select>
    <option data-color="all"> -- Все цвета -- </option>
    <option value="1" data-color="white">Белый</option>
    <option value="2" data-color="black">Черный</option>
    <option value="3" data-color="grey">Серый</option>
</select>
<select>
    <option value="4" data-color="white">Белая модель 1</option>
    <option value="5" data-color="white">Белая модель 2</option>
    <option value="6" data-color="black">Черная модель 1</option>
    <option value="7" data-color="black">Черная модель 2</option>
    <option value="8" data-color="grey">Серая модель 1</option>
    <option value="9" data-color="grey">Серая модель 2</option>
</select>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var sel = $('select'),
    cache = $('option', sel.eq(1));
sel.eq(0).on('change', function(){
    var selectedColor = $(':selected',this).data('color'),
        filtered;
    if(selectedColor == 'all') {
        filtered = cache;
    } else {
        filtered = cache.filter(function(){
          return $(this).data('color') == selectedColor;
        });
    }
    sel.eq(1).html(filtered).prop('selectedIndex', 0);
});

@Sega28 · 13.05.2015, 14:05 **[ТС]**

Lazy_Den, Спасибо! буду побывать!)

Добавлено через 1 час 25 минут
Lazy_Den, еще вопрос связать по id можно?

@Lazy_Den · 13.05.2015, 14:11

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

связать по id можно?

id - это уникальный элемент, поэтому одинаковых id не может быть в двух ваших select-ах. Можно по классам, только это будет практически идентично варианту с data-атрибутом

@Sega28 · 13.05.2015, 14:14 **[ТС]**

Lazy_Den, да знаю, но у меня их selectov много)) и каждого есть свой идентификатор, ну или по классу связать

@Lazy_Den · 13.05.2015, 14:17

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

ну или по классу связать

По классу связать не проблема. Я только не понял - вы хотите select-ы связать или значения элементы списков (<option>) ними?

@Sega28 · 13.05.2015, 14:19 **[ТС]**

Lazy_Den, select-ы просто у меня этих selekt-ов на странице 4-5, а как понял скрипты берет первый selekt

@Lazy_Den · 13.05.2015, 14:22

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

а как понял скрипты берет первый selekt

Ну, можно этому первому select-у задать класс или id, но опять же, если он в единственном экземпляре.

@Sega28 · 13.05.2015, 14:26 **[ТС]**

Lazy_Den, да он один будет

@Lazy_Den · 13.05.2015, 14:35

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

да он один будет

Вот и задайте этому первому select-у класс или id и другому select-у, который должен быть с ним связан. В итоге, получаем что-то в этом роде:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<select class="sel_a">
    <option data-color="all"> -- Все цвета -- </option>
    <option value="1" data-color="white">Белый</option>
    <option value="2" data-color="black">Черный</option>
    <option value="3" data-color="grey">Серый</option>
</select>
<select class="sel_b">
    <option value="4" data-color="white">Белая модель 1</option>
    <option value="5" data-color="white">Белая модель 2</option>
    <option value="6" data-color="black">Черная модель 1</option>
    <option value="7" data-color="black">Черная модель 2</option>
    <option value="8" data-color="grey">Серая модель 1</option>
    <option value="9" data-color="grey">Серая модель 2</option>
</select>

JavaScript
1
2
3
4
5
6
7
8
9
10
var selA = $('.sel_a'),
    selB = $('.sel_b'),
    cache = $('option', selB);
selA.on('change', function(){
    var selectedColor = $(':selected',this).data('color'),
        filtered = (selectedColor == 'all' ? cache : cache.filter(function(){
            return $(this).data('color') == selectedColor;
        }));
    selB.html(filtered).prop('selectedIndex', 0);
});

@Sega28 · 13.05.2015, 15:15 **[ТС]**

Lazy_Den, Все заработало спасибо!)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .

@Sega28 6 / 6 / 1 Регистрация: 22.05.2012 Сообщений: 128
	13.05.2015, 14:05 [ТС]
	Lazy_Den, Спасибо! буду побывать!) Добавлено через 1 час 25 минут Lazy_Den, еще вопрос связать по id можно? 0

@Sega28 6 / 6 / 1 Регистрация: 22.05.2012 Сообщений: 128
	13.05.2015, 14:14 [ТС]
	Lazy_Den, да знаю, но у меня их selectov много)) и каждого есть свой идентификатор, ну или по классу связать 0

@Sega28 6 / 6 / 1 Регистрация: 22.05.2012 Сообщений: 128
	13.05.2015, 14:19 [ТС]
	Lazy_Den, select-ы просто у меня этих selekt-ов на странице 4-5, а как понял скрипты берет первый selekt 0

@Sega28 6 / 6 / 1 Регистрация: 22.05.2012 Сообщений: 128
	13.05.2015, 14:26 [ТС]
	Lazy_Den, да он один будет 0

@Sega28 6 / 6 / 1 Регистрация: 22.05.2012 Сообщений: 128
	13.05.2015, 15:15 [ТС]
	Lazy_Den, Все заработало спасибо!) 0

Опции темы

Фильтр значений в <select>

Решение