2015-06-03 4 views
0

Давайте посмотрим, если вы можете мне помочь: у меня есть этот HTML:Скрытие выберите в DIV в зависимости от радио

<div class="store"> 
    <input type="radio" name="storename" id="store1" /> 
    <select name="time_availability"> 
     <option value="1pm">01:00 pm</option> 
     <option value="2pm">02:00 pm</option> 
    </select> 
</div> 
<div class="store"> 
    <input type="radio" name="storename" id="store1" /> 
    <select name="time_availability"> 
     <option value="1pm">01:00 pm</option> 
     <option value="2pm">02:00 pm</option> 
    </select> 
</div> 
<div class="store"> 
    <input type="radio" name="storename" id="store1" /> 
    <select name="time_availability"> 
     <option value="1pm">01:00 pm</option> 
     <option value="2pm">02:00 pm</option> 
    </select> 
</div> 

По умолчанию каждый выбрать внутри сНу класса «магазин» продолжает скрывать и только тогда, когда проверять радио, отображаются выбор, который приходит сразу же после этого радио в то время как другие держат скрытыми, так что я сделал это:

$('input[name="storename"]:radio').change(function() { 
    $(this).parents('.store').find('select').fadeIn('fast'); 
}); 

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

спасибо

ответ

0

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

$('input[name="storename"]:radio').change(function() { 
    $(".store select").fadeOut("fast"); //hide others 
    $(this).parent('.store').find('select').fadeIn('fast'); 
}); 

Демо: http://jsfiddle.net/zyt9y1b7/

0

You сначала должны скрыть видимые поля выбора, или они все равно будут отображаться. Я хотел бы использовать что-то вроде следующего JavaScript:

$('input[name="storename"]').click(function() { 
    $('select[name="time_availability"]').hide(); 
    $(this).siblings('select').fadeIn('fast'); 
}); 

Вы можете увидеть рабочую демо здесь: http://jsfiddle.net/2Lm63cjy/

Смежные вопросы