[英]Showing div when dropdown is slected and radio button is clicked
I have this drop down
when I select that particular option I am given a radio
button so when I choose the radio button I should be displayed a div
and when I choose something else from the drop down
menu that div
which was shown should now be hidden 我有这个
drop down
当我选择,我给一个特定的选项radio
按钮,当我选择的单选按钮,我应该会显示一个div
,当我选择从别的东西drop down
菜单div
其显示现在应该被隐藏
index.html 的index.html
<select id="selection" name="sub_sel">
<option value="blank"></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
</select>
<div id="buttons" style="display:none;">
<form id='form-id'>
<input id='radio1' name='test' type='radio' /> Number1<br />
<input id='radio2' name='test' type='radio' /> Number 2<br />
</form>
</div>
<div id='select_raido1' style='display:none'>Div1</div>
<div id='select_raido2' style='display:none'>Div2</div>
jquery.js 的jquery.js
$(document).ready(function(){
$('#selection').on('change', function(){
if (this.value == 'option_1')
{
$("#buttons").show();
}else{
$("#buttons").hide();
}
});
});
$('#form-id').change(function() {
if ($('#radio1').attr('checked')) {
$('#select_raido1').show();
} else {
$('#select_raido1').hide();
}
if ($('#radio2').attr('checked')) {
$('#select_raido2').show();
} else {
$('#select_raido2').hide();
}
});
This is what i have so far can somebody please tell me what i am doing incorrect 这是我到目前为止的信息,有人可以告诉我我做错了什么吗
i am unable to display div when i click on the radio button and hide them when choosing a different drop down option 单击单选按钮时无法显示div,选择其他下拉选项时无法隐藏它们
Check with :checked for radiobutton. 用:检查单选按钮。 Try like this:
尝试这样:
$('#form-id').change(function() {
if ($('#radio1').is(':checked')) {
$('#select_raido1').show();
} else {
$('#select_raido1').hide();
}
if ($('#radio2').is(':checked')) {
$('#select_raido2').show();
} else {
$('#select_raido2').hide();
}
});
Updated the fiddle: https://jsfiddle.net/43rx29vj/6/ 更新了小提琴: https : //jsfiddle.net/43rx29vj/6/
It's easier to make your elements more accessible by adding class names. 通过添加类名称,使元素更易于访问更容易。
$(document).ready(function() { $('#selection').on('change', function() { if (this.value == 'option_1') { $("#buttons").show(); }else{ $("#buttons").hide(); $('.mySelect').hide(); } }); $('.myRadio').click(function(){ $('.mySelect').hide(); $('#' + $(this).data('target')).show(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <select id="selection" name="sub_sel"> <option value="blank"></option> <option value="option_1">Option 1</option> <option value="option_2">Option 2</option> </select> <div id="buttons" style="display:none;"> <form id='form-id'> <input id='radio1' name='test' type='radio' data-target='select_raido1' class='myRadio' /> Number1<br /> <input id='radio2' name='test' type='radio' data-target='select_raido2' class='myRadio' /> Number 2<br /> </form> </div> <div id='select_raido1' style='display:none' class='mySelect'>Div1</div> <div id='select_raido2' style='display:none' class='mySelect'>Div2</div>
You could simplify your code without changing anything in you HTML code check the example bellow. 您可以简化代码,而无需更改HTML代码中的任何内容,请参见下面的示例。
NOTE : 注意 :
$("div[id^='select_']").hide(); //Mean hide all divs with id start by "select_"
Hope this helps. 希望这可以帮助。
$(document).ready(function(){ $('#selection').on('change', function() { if ($(this).val() == 'option_1') $("#buttons").show(); else $("#buttons").hide(); $("div[id^='select_']").hide(); }); $('#form-id input').change(function() { $("div[id^='select_']").hide(); $('#select_'+this.id).show(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="selection" name="sub_sel"> <option value="blank"></option> <option value="option_1">Option 1</option> <option value="option_2">Option 2</option> </select> <div id="buttons" style="display:none;"> <form id='form-id'> <input id='radio1' name='test' type='radio' /> Number1<br /> <input id='radio2' name='test' type='radio' /> Number 2<br /> </form> </div> <div id='select_radio1' style='display:none'>Div1</div> <div id='select_radio2' style='display:none'>Div2</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.