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类内部＆＃34;存储＆＃34;保持隐藏，只有当检查收音机时，显示该收音机后立即显示的选择而其他人保持隐藏，所以我这样做：

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

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

谢谢

Answer 1

在展示你的之前，你必须隐藏另一个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/

根据无线电隐藏div中的选择

2 个答案: