下拉列表-單擊選項時顯示div

Question

您必須編寫一個函數，根據用戶選擇的內容“顯示”表單的相應部分。 例如，如果選擇“ Pizza”，則應顯示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。

Answer 2

有很多解決方案。 最簡單的選項之一是稍微更改標記並使用div ID。

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的：

function selection(select) {
    document.getElementById("section_" + select.value).style.display = "block";
}

---

但是，您可以使用JQuery庫並使它更快，更靈活。 您可以輕松地將動畫添加到塊並添加其他功能。

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的：

$("#food").change(function() {
    $("[data-type]").hide();
    $("[data-type='" + this.value + "']").show(1000);
});