1

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

<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();
});

Не помогло.

1 ответ 1

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();
});
2
  • Блок показывается, но при этом не скрывается. 28 ноя 2014 в 10:37
  • Посмотрите пример, возможно, вам нужно сделать контейнер, как там, там же всё скрывается.
    – MasterAlex
    28 ноя 2014 в 11:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.