根据电台隐藏div中的选择

Question

让我们看看您是否可以帮助我：我有这个html：

<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>

默认情况下，div类“ store”中的每个select都保持隐藏，并且仅在检查单选时才显示该单选之后立即出现的select，而其他保持隐藏，因此我这样做了：

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

我的问题：当我检查另一个单选选项时，仍然显示先前的选择，而不是隐藏先前的选择，并显示我单击的单选之后出现的相应选择？ 我不知道我是否清楚...

谢谢

Answer 1

在显示您的select之前，您必须隐藏其他select ：

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

演示： http ： //jsfiddle.net/zyt9y1b7/

Answer 2

您应该首先隐藏可见的选择字段，否则它们仍将显示。 我会使用类似以下javascript的内容：

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

您可以在此处查看有效的演示： http : //jsfiddle.net/2Lm63cjy/