简体   繁体   English

jQuery显示和隐藏div

[英]jquery show and hide divs

I have a form with a yes|no question displayed by radio selectors. 我有一个表单,单选框显示“是|否”问题。 I have two divs each one containing different drop downs based on the yes|no response. 我有两个div,每个div基于yes | no响应包含不同的下拉列表。 I cannot figure out how to show one and hide the other. 我不知道如何显示一个并隐藏另一个。

jsFiddle of this code 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>

Assuming your markup (html) is correct, try the following. 假设您的标记(html)是正确的,请尝试以下操作。 It binds to click-events of those radio buttons (both of them), always hides both divs first, and then shows the appropiate div only (the one that belongs to the radio button clicked). 它绑定到那些单选按钮(两者都)的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();
    }); 
}); 

To make one hidden and other visible , you have to first hide both the blocks then add show() on the block you want to see. 要使一个隐藏而另一个可见,您必须首先隐藏两个块,然后在要查看的块上添加show() This will work for you. 这将为您工作。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM