Как отобразить блок с помощью option?

Рейтинг: 1Ответов: 1Опубликовано: 28.11.2014

Есть вот такой код: 

<select>
  <option id="umor">Юмор</option>
  <option id="music">Музыка</option>
  <option id="images">Картинки</option>
  <option id="video">Видео</option>
</select>

Как сделать, допустим, так, чтобы при выборе <option id="music">Музыка</option> появлялся только 

<div class="music"></div>

Пробовал:

$("#music").click(function(){
    $(".music").show();
});

Не помогло.

javascript html jquery html-select
Источник: Stack Overflow на русском

Ответы

▲ 3Принят

Для определения изменения выбора в селекте используется функция change(), вот пример того, как можно сделать вашу логику.

HTML:

<select id="selectItem">
    <option id="umor">Юмор</option>
    <option id="music">Музыка</option>
    <option id="images">Картинки</option>
    <option id="video">Видео</option>
</select>
<div class="container">
    <div class="umor">Показываем юмор</div>
    <div class="music">Показываем музыку</div>
    <div class="images">Показываем картинки</div>
    <div class="video">Показываем видео</div>
</div>

JS:

$('.umor').show();

$("#selectItem").change(function(){
    $('.container').find('div').hide();
    var selected = $('#selectItem option:selected').attr('id');
    $('.' + selected).show();
});