[英]jquery show and hide divs
我有一个表单,单选框显示“是|否”问题。 我有两个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"> </label>
Yes <input name="radio_button" id="radio_button" type="radio" value="test2" onChange="" />
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>
假设您的标记(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();
});
});
要使一个隐藏而另一个可见,您必须首先隐藏两个块,然后在要查看的块上添加show()
。 这将为您工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.