Question

我有一个表格，无线电选择器显示yes | no question。我有两个div，每个div包含基于yes | no响应的不同下拉列表。我无法弄清楚如何展示一个并隐藏另一个。

    $(document).ready(function(){   
    $("input[name=radio_button]").change(function() {
        var test1= $(this).val();                   
        $("#"+test1).show();
        $("div.test2").hide();  
    }); 
    $("input[name=radio_button]").select(function() {
        var test2= $(this).val();       
        $("#"+test2).show();
        $("div.test1").hide();
    }); 
}); 

<p>
        <label class="required">&nbsp;</label>
        Yes <input name="radio_button" id="radio_button" type="radio" value="test2" onChange="" />&nbsp;&nbsp;&nbsp;
        No <input name="radio_button" id="radio_button" type="radio" value="test1" />
    </p>     
<p>
    <label class="required">Device: </label><br />
    <div id="test1" class="test1_div">
    <label style="font-weight:600;">test1</label>
        <select name="order.item" id="item" >
          <option value="default">Please Select item</option> 
        </select>
</div>
<div id="test2" class="test2_div">
<label style="font-weight:600;">item2</label>
        <select name="order.item" id="device">
          <option value="default">Please Select Device</option>             
        </select>
</div> 
</p>

Answer 1

假设您的标记（html）正确，请尝试以下操作。它绑定到那些单选按钮（它们都是）的点击事件，总是首先隐藏两个div，然后仅显示适当的div（属于单击单选按钮的那个）。

$(document).ready(function(){   
    $("input[name=radio_button]").click(function() {
        var test= $(this).val();    

        $("div.test1, div.test2").hide(); //Hide both divs
        $("#"+test).show();
    }); 
});

Answer 2

要使一个隐藏和其他可见，您必须先隐藏两个块，然后在要查看的块上添加show()。这对你有用。

jquery显示和隐藏div

2 个答案: