如何根據下拉菜單用戶選擇顯示內容

Question

我在表單底部有一個下拉菜單，其中包含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>

任何幫助將不勝感激。

Answer 1

我添加了您提到的div並為每個id賦予了一個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/

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