javascript 下拉列表 - 单击选项时显示 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10572004/
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
Drop down list - display div when clicking an option
提问by Anthony Do
You must write a function that 'shows' the corresponding part of the form depending on what the user has selected. For example, if 'Pizza' is selected, the div #section2 with the question about Pizza type should be shown.
您必须编写一个函数，根据用户选择的内容“显示”表单的相应部分。例如，如果选择“比萨”，则应显示带有比萨类型问题的 div #section2。
This is part of the html code
这是html代码的一部分
<form id="survey" action="#" method="post">
<div id="section1">
<label for="food">What is your favourite type of food?</label>
<select id="food" onchange="selection()">
<option value="pizza">Pizza</option>
<option value="mex">Mexican</option>
<option value="thai">Thai</option>
</select>
</div>
<div id="section2">
What is your favourite type of pizza?<br>
<label for="hawaiian">Hawaiian</label><input type="radio" id="hawaiian">
<label for="supreme">Supreme</label><input type="radio" id="supreme">
<label for="vegetarian">Vegetarian</label><input type="radio" id="vegetarian">
</div>
How would i write a javascript function so that when I click the option pizza, it will display section 2? I'm a complete javascript novice so any help would be great.
我将如何编写一个 javascript 函数，以便当我单击选项披萨时，它会显示第 2 部分？我是一个完整的 javascript 新手，所以任何帮助都会很棒。
回答by iambriansreed
DEMO: http://jsfiddle.net/iambriansreed/rQr6v/
演示：http: //jsfiddle.net/iambriansreed/rQr6v/
JavaScript:
JavaScript：
var sections = {
'pizza': 'section2',
'mex': 'section3',
'thai': 'section4'
};
var selection = function(select) {
for(i in sections)
document.getElementById(sections[i]).style.display = "none";
document.getElementById(sections[select.value]).style.display = "block";
}
Checkout the demo. Replace the section3and section4divs with actual content.
查看演示。用实际内容替换section3和section4div。
回答by VisioN
There are plenty of solutions for that. One of the simpliest options is to change your markup a bit and use divIDs.
有很多解决方案。最简单的选择之一是稍微更改您的标记并使用divID。
HTML:
HTML：
<div id="section1">
<label for="food">What is your favourite type of food?</label>
<select id="food" onchange="selection(this)">
<option value="pizza">Pizza</option>
<option value="mex">Mexican</option>
<option value="thai">Thai</option>
</select>
</div>
<div id="section_pizza" style="display: none;">
What is your favourite type of pizza?<br>
<label for="hawaiian">Hawaiian</label><input type="radio" id="hawaiian">
<label for="supreme">Supreme</label><input type="radio" id="supreme">
<label for="vegetarian">Vegetarian</label><input type="radio" id="vegetarian">
</div>
JavaScript:
JavaScript：
function selection(select) {
document.getElementById("section_" + select.value).style.display = "block";
}
However, you can use JQuery libraryand make it faster and more flexible. You can easily add animation to blocks and add extra functionality.
但是，您可以使用JQuery 库并使其更快、更灵活。您可以轻松地为块添加动画并添加额外的功能。
HTML:
HTML：
<div id="section1">
<label for="food">What is your favourite type of food?</label>
<select id="food">
<option value="pizza">Pizza</option>
<option value="mex">Mexican</option>
<option value="thai">Thai</option>
</select>
</div>
<div id="section2" data-type="pizza" style="display: none;">
What is your favourite type of pizza?<br>
<label for="hawaiian">Hawaiian</label><input type="radio" id="hawaiian">
<label for="supreme">Supreme</label><input type="radio" id="supreme">
<label for="vegetarian">Vegetarian</label><input type="radio" id="vegetarian">
</div>
JavaScript:
JavaScript：
$("#food").change(function() {
$("[data-type]").hide();
$("[data-type='" + this.value + "']").show(1000);
});
