How to display content depending on dropdown menue user selection

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.

Kevin Bowersox · Accepted Answer · 2013-08-08 00:32:45Z

I added the divs 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/

Bit68 · Accepted Answer · 2013-08-08 00:28:44Z

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>

Collectives™ on Stack Overflow

How to display content depending on dropdown menue user selection

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related