javascript 在单选按钮已设置为 yes 时显示隐藏的 div
[英]javascript to show hidden divs on change of drop down menu when radio button is already set to yes
问题描述
Hi I have a dropdown with different selections when i select the second option there is a set of yes/no radio buttons once I select yes I show divs of hidden fields and then when I change the value of the dropdown I hide those fields.
嗨，当我 select 第二个选项有一组是/否单选按钮时，我有一个带有不同选择的下拉菜单 select 是的，我显示隐藏字段的 div，然后当我更改下拉菜单的值时，我隐藏这些字段。 The problem is when I come back to the second selection in the dropdown the yes radio button is already selected but the hidden fields are not showing like they did the first time unless I click on the yes radio button.问题是当我回到下拉列表中的第二个选项时，yes 单选按钮已被选中，但隐藏字段没有像第一次那样显示，除非我单击 yes 单选按钮。 How do I get the hidden fields to show when the radio button is already yes?当单选按钮已经是“是”时，如何让隐藏字段显示？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tea").hide();
$("#milk").hide();
$("#coffee").hide();
$("#teano").hide();
$("#teayes").hide();
$("#testradio").hide();
$('#q1').click(function() {
if ($(this).val() === 'y') {
$("#testradio").show();
} else if ($(this).val() === 'n') {
$("#testradio").hide();
}
});
$("select").change(function(){
$( "select option:selected").each(function(){
if($(this).attr("value")=="1"){
$("#tea").hide();
$("#milk").show();
$("#testradio").hide();
$("#coffee").hide();
}
if($(this).attr("value")=="2"){
$("#tea").show();
$("#testradio").hide();
$("#milk").hide();
$("#coffee").hide();
}
if($(this).attr("value")=="3"){
$("#tea").hide();
$("#milk").hide();
$("#coffee").show();
$("#testradio").hide();
}
});
}).change();
});
</script>
</head>
<body>
<div>
<select>
<option>Choose beverage</option>
<option value="1">milk</option>
<option value="2">tea</option>
<option value="3">coffee</option>
</select>
</div>
<div id="milk">
milk choices go here</div>
<div id="tea">
caffeine
<INPUT TYPE="radio" NAME="q1" id="q1" VALUE="y">Yes
<INPUT TYPE="radio" NAME="q1" id="q1" VALUE="n">No
</div>
<div id="teayes">
tea yes
</div>
<div id="testradio">
test radio button show
</div>
<div id="teano">
tea no
</div>
<div id="coffee">
coffee goes here</div>
</body>
</html>
2 个解决方案
解决方案1
2 2014-12-05 17:52:24
Fast solution:快速解决方案：
$('select[name="teas"]').on('change', function (e) {...}).trigger('change');
解决方案2
1 2014-12-05 17:53:13
Just trigger it只要触发它
$('select[name="teas"]').on('change', function (e) {}).change();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.