jQuery顯示和隱藏div

Question

我有一個表單，單選框顯示“是|否”問題。 我有兩個div，每個div基於yes | no響應包含不同的下拉列表。 我不知道如何顯示一個並隱藏另一個。

jsFiddle的這段代碼

    $(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）是正確的，請嘗試以下操作。 它綁定到那些單選按鈕（兩者都）的click-event，始終先隱藏兩個div，然后僅顯示適當的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() 。 這將為您工作。