下拉列表 - 单击选项时显示div [英] Drop down list - display div when clicking an option

问题描述

您必须根据用户选择的内容编写一个显示表单相应部分的函数。例如，如果选择'比萨'，则应该显示带有关于比萨类型问题的div＃section2。

这是html代码的一部分

 < form id =surveyaction =＃method =post> 
 
< div id =section1> 
< label for =food>您最喜欢哪种食物？< / label> 
< select id =foodonchange =selection（）> 
< option value =pizza> Pizza< / option> 
< option value =mex> Mexican< / option> 
< option value =thai> Thai< / option> 
< / select> 
< / div> 
< div id =section2> 
您最喜欢的披萨类型是什么？< br> 
< label for =hawaiian>夏威夷< / label>< input type =radioid =hawaiian> 
< label for =supreme> Supreme< / label>< input type =radioid =supreme> 
< label for =素食>素食< / label>< input type =radioid =素食> 
< / div> 
  

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

解决方案

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。

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.

This is part of the html code

<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.

解决方案

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

}

Checkout the demo. Replace the section3 and section4 divs with actual content.

这篇关于下拉列表 - 单击选项时显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！