Как сделать так, чтобы при выборе в списке был виден другой список?

Question

[Aison]

Как сделать так, чтобы при выборе в списке select был виден другой список select?

Делаю фильтры на сайте, хочу, чтобы пользователь не путался в множестве списков select.

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

сами списки стилизованы плагином

как быть?

привязать к div тоже не получается, код генрится javascript'ом, а с ним у меня проблемы) это можно увидеть в коде ниже)

есть такой скрипт:

<script type="text/javascript">$(document).ready(function () { $(".metamid").hide();$("#utab1").click(function(){$(".metamid").hide()});$("#utab2").click(function(){$(".metamid").show()});$("#utab3").click(function(){$(".metamid").hide()});});</script>

только он не сработает для option'ов. вроде нужно привязывать к самому списку select...

Comments

[Павел]

а html где? Залей весь код на https://jsfiddle.net/

[Aison]

mrusklon,

при выборе "Музыка" в первом списке

<select>
 <option>Музыка</option>
 <option>Аудио книги</option>
</select>

показывался второй список, ранее скрытый например: display: none;

<select style="display:none">
 <option>Рок</option>
 <option>Классика</option>
 <option>Рэп</option>
</select>

[Павел Корнилов]

Как сделать Раскрывающее меню по HOVER?

[Сергей delphinpro]

как сделать зависимые селекты

Answer 1

[Илья Воропаев]

По событию change для select надо показывать нужный.
Можно фильтровать по значению option.

Как-то так:

<select id="type">
    <option>Выбрать</option>
    <option value="muz">Музыка</option>
    <option value="book">Аудио книги</option>
</select>

<select id="muz" style="display:none">
    <option>Выбрать</option>
    <option value="">Рок</option>
    <option value="">Классика</option>
    <option>Рэп</option>
</select>

<select id="book" style="display:none">
    <option>Выбрать</option>
    <option value="">Рок</option>
    <option value="">Классика</option>
</select>

$(function(){
      $('#type').change(function () {
           $('#'+ $(this).val() ).show();
      });
});

Comments

[Aison]

и Вам спасибо

немного дописал условие и всё гут ^^

Answer 2

[Павел]

<select id="one">
    <option>Выбрать</option>
    <option>Музыка</option>
    <option>Аудио книги</option>
</select>

<select id="two" style="display:none">
    <option>Выбрать</option>
    <option>Рок</option>
    <option>Классика</option>
    <option>Рэп</option>
</select>

<select id="someid" style="display:none">
    <option>Выбрать</option>
    <option>Рок</option>
    <option>Классика</option>
    <option>Рэп</option>
</select>

$(function () {

        $('#one').change(function () {
           $('#two').show();
        });
        $('#two').change(function () {
            $('#someid').show();
        });

    });

так?

Comments

[Aison]

спасибо))