Как сделать фильтр выпадающих списков на Jquery?

Question

[Denis Dudnik]

Здравствуйте, есть 3 выпадающих списка. Нужно сделать так, что бы при выборе в первом списке Фрукты, то во втором появлялись только фрукты, а не цвета (например). То есть показывать во втором списке те элементы, которые относятся к элементу выбранном в первом списке. А третий список уже будет зависеть от второго.
Подскажите где почитать, и куда смотреть.
P.S. Надеюсь нормально обьяснил=)

Answer 1

[Евгений Самойленко]

Смотря как у вас появляются данные в других выпадающих списках:
1. Если из базы данных - вешаете обработчик на изменение селекта и делаете ajax запрос в бд где по критерию выбираете наполнение для следующего селекта.
2. Если у вас изначально все селекты наполнены общим количеством данных - делаете так:

<select id='second_select'>
<option class='fruits' >яблоко</option>
<option class='fruits' >Апельсин</option>
<option class='no_fruits' >Картошка</option>
</select>

При изменении первого селекта - в зависимости от того, что там выбрано скрываете не нужные элементы.

Допустим:

$('#first_select').change(function(){
if($(this).val() === 'fruits'){
 $('#second_select').find('.no_fruits').hide();
} 
})

Comments

[Denis Dudnik]

Спасибо за ответ, сейчас попробую. Пробовал что то подобное, но ,видимо, знаний языка пока маловато=) Ещё раз спасибо

[Denis Dudnik]

А ещё вопрос сразу, можно ли что бы элементы были по умолчанию скрыты, и при выборе из 1 списка, во втором показывать (а не убирать) значения? Так как списки довольно большие и ,как я понял, убирать придётся каждый ненужный айдишник

[Евгений Самойленко]

@aNation конечно, тогда всем оптионам второго списка изначально добавьте класс hidden со стилями display: none; а при выбре делаете не .hide(), а removeClass('hidden');

[Denis Dudnik]

@samoilenkoevgeniy попробовал Ваш способ, класс убирается только у первого элемента, у которого совпал айдишник с указанным, второго списка. То есть если я выбираю фрукты, во втором списке появляется только 1 (первый совпавший) фрукт