ドロップダウンリスト - オプションをクリックするとdivが表示される

Question

ユーザーが選択した内容に応じてフォームの対応する部分を '表示'する関数を記述する必要があります。たとえば、「Pizza」が選択されている場合、div＃section2にピザタイプに関する質問が表示されます。

これは、htmlコードIは、オプションのピザをクリックしたとき、それはセクション2に表示されるように、私はjavascript関数を記述しますどのように

<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初心者ですので、どんな助けも素晴らしいでしょう。

Answer 1

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

解決策はたくさんあります。最も単純なオプションの1つは、マークアップを少し変更して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 libraryを使用して、それはより速く、より柔軟に行うことができます。アニメーションをブロックに簡単に追加したり、余分な機能を追加することができます。

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); 
});