Фильтр значений в <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, Все заработало спасибо!)

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

@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>

Решение