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

Question

I have a dropdown menu at the bottom of a form with 6 different options. I need to display different content on a div below this menu depending on which option is selected.

No additional content should be visible until the user is to select one of the options and once the user select one of the options only content associated with that specific option should be visible.

I need to create this functionality using JavaScript but my knowledge of JavaScript is very limited and I don't seem to find what I need online.

I believe what I need to do is create 6 different divs(one for each option) and toggle a class that makes them visilble once its respective title is selected.

Here is the dropdown menu that I have:

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

Any help will be greatly appreciated.

Answer 1

I added the div s you mentioned and gave each an id which makes the Javascript a little easier.

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>

Working Example http://jsfiddle.net/qbzmz/

Answer 2

use the onchange function like so

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