Javascript 根据选择框选择显示隐藏的表单字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8812397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display hidden form field based on select box choice
提问by 422
Here is a form element I have.
这是我拥有的表单元素。
<select id="state" name="state" style="width: 212px;">
<option value="nsw">New South Wales</option>
<option value="qld">Queensland</option>
<option value="vic">Victoria</option>
<option value="nt">Northern Territory</option>
<option value="tas">Tasmania</option>
<option value="sa">South Australia</option>
<option value="wa">Western Australia</option>
<option value="act">Australian Capital Territory</option>
<option value="notinoz">Not in Australia</option>
</select>
What I want to do is below this add another select box element , if user chooses "not in Australia" in the options above. I am really after the cleanest lightest code possbile.
我想要做的是在此下方添加另一个选择框元素，如果用户在上面的选项中选择“不在澳大利亚”。我真的在追求最干净、最轻的代码。
I am presuming we create a div and set visibility:hidden just not sure how to trigger it.
我假设我们创建了一个 div 并设置了可见性：隐藏只是不确定如何触发它。
回答by Greg Wineman
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#state").change(function() {
// foo is the id of the other select box
if ($(this).val() != "notinoz") {
$("#foo").show();
}else{
$("#foo").hide();
}
});
});
</script>
</head>
<body>
<p>
<select id="state" name="state" style="width: 212px;">
<option value="nsw">New South Wales</option>
<option value="qld">Queensland</option>
<option value="vic">Victoria</option>
<option value="nt">Northern Territory</option>
<option value="tas">Tasmania</option>
<option value="sa">South Australia</option>
<option value="wa">Western Australia</option>
<option value="act">Australian Capital Territory</option>
<option value="notinoz">Not in Australia</option>
</select>
</p>
<p id="foo" style="display:none;">
<select style="width: 212px;>
<option value="item1">Item</option>
<option value="item2">Item</option>
<option value="item3">Item</option>
</select>
</p>
</body>
回答by ngen
How about this? http://jsfiddle.net/JKqWf/4/
这个怎么样？http://jsfiddle.net/JKqWf/4/
HTML
HTML
<select id="state" name="state" style="width: 212px;" onclick='test()'>
<option value="nsw">New South Wales</option>
<option value="qld">Queensland</option>
<option value="vic">Victoria</option>
<option value="nt">Northern Territory</option>
<option value="tas">Tasmania</option>
<option value="sa">South Australia</option>
<option value="wa">Western Australia</option>
<option value="act">Australian Capital Territory</option>
<option value="notinoz">Not in Australia</option>
</select>
<select id="extra" name="extra" style="display: none">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
JS
JS
function test() {
if (document.getElementById('state').value == 'notinoz') {
document.getElementById('extra').style.display = 'block';
} else {
document.getElementById('extra').style.display = 'none';
}
}
