如何根据下拉菜单用户选择显示内容答案

【问题标题】：How to display content depending on dropdown menue user selection如何根据下拉菜单用户选择显示内容
【发布时间】：2013-08-08 00:17:05
【问题描述】：

我在表单底部有一个下拉菜单，其中包含 6 个不同的选项。我需要根据选择的选项在此菜单下方的 div 上显示不同的内容。

在用户选择其中一个选项之前，不应看到任何其他内容，并且一旦用户选择了其中一个选项，则只有与该特定选项相关联的内容应可见。

我需要使用 JavaScript 创建此功能，但我对 JavaScript 的了解非常有限，而且我似乎无法在网上找到我需要的东西。

我相信我需要做的是创建 6 个不同的 div（每个选项一个）并切换一个类，一旦选择了相应的标题，就会使它们可见。

这是我的下拉菜单：

 <div class="field">
    <label for="roleBox" data-label="I_AM">{% trans %} main.I_AM_TITLE {% endtrans %}</label>
    <div class="f-wrapper">
       <select class="cbx" tabindex="50" name="role">
              <option value="student">A Student</option>
              <option value="educator">An Educator</option>
              <option value="parent">A parent signing up for my child</option>
              <option value="not-school">Not in school but still learning</option>
              <option value="publisher">A Publisher or interested Kno partner</option>
       </select>
    </div>
 </div>

任何帮助将不胜感激。

【问题讨论】：

标签： javascript html css

【解决方案1】：

我添加了你提到的divs，并给了每个id，这使得Javascript更容易一些。

Javascript

var ids=["student", "educator", "parent", "not-school", "publisher"];
var dropDown = document.getElementById("roleSel");

dropDown.onchange = function(){
    for(var x = 0; x < ids.length; x++){   
        document.getElementById(ids[x]).style.display="none";
    }    
    document.getElementById(this.value).style.display = "block";
}

HTML

 <div class="field">
    <label for="roleBox" data-label="I_AM">{% trans %} main.I_AM_TITLE {% endtrans %}</label>
    <div class="f-wrapper">
       <select id="roleSel" class="cbx" tabindex="50" name="role">
              <option value="student">A Student</option>
              <option value="educator">An Educator</option>
              <option value="parent">A parent signing up for my child</option>
              <option value="not-school">Not in school but still learning</option>
              <option value="publisher">A Publisher or interested Kno partner</option>
       </select>
    </div>
 </div>
<div id="student" class="hidden">Student div</div>
<div id="educator" class="hidden">Educator div</div>
<div id="parent" class="hidden">Student div</div>
<div id="not-school" class="hidden">Not School div</div>
<div id="publisher" class="hidden">Student div</div>

工作示例 http://jsfiddle.net/qbzmz/

【讨论】：

【解决方案2】：

像这样使用 onchange 函数

<div class="field">
    <label for="roleBox" data-label="I_AM">{% trans %} main.I_AM_TITLE {% endtrans %}</label>
    <div class="f-wrapper">
       <select class="cbx" id="selctor" tabindex="50" name="role" onchange="selectChanged();">
              <option value="student">A Student</option>
              <option value="educator">An Educator</option>
              <option value="parent">A parent signing up for my child</option>
              <option value="not-school">Not in school but still learning</option>
              <option value="publisher">A Publisher or interested Kno partner</option>
       </select>
    </div>
</div>
<script>
    function selectChanged(){
        //get the value of selector and act upon it
        //i would use jquery to do this stuff
    }
</script>

【讨论】：