드롭 다운 목록 - 옵션을 클릭하면 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> 

의 일부입니다? 어떤 도움이 될 것입니다 그래서 완전한 자바 스크립트 초보자 해요.

Answer 1

DEMO : http://jsfiddle.net/iambriansreed/rQr6v/

자바 스크립트 :

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> 

자바 스크립트 :

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> 

자바 스크립트 :

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