javascript - 下拉列表 - 单击选项时显示 div

Question

您必须编写一个函数，根据用户的选择“显示”表单的相应部分。例如，如果选择“披萨”，则应显示带有有关披萨类型问题的 div #section2。

这是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>

我如何编写一个 JavaScript 函数，以便当我单击“披萨”选项时，它将显示第 2 部分？我是一个完全的 JavaScript 新手，所以任何帮助都会很棒。

Answer 1

演示:http://jsfiddle.net/iambriansreed/rQr6v/

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";

}

查看演示。将 section3 和 section4 div 替换为实际内容。