Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Show a second dropdown based on previous dropdown selection

Tags:

javascript

html

css

drop-down-menu

First off, I hate bringing up an issue that has already been dealt with, but you should know the other options I have found on this site aren't working for me.

Basically, I want to construct a short form where there are two dropdown boxes. The first is always shown, the second is hidden by default. When a certain option in the first dropdown box is selected, I then want the second dropdown box to show. This is a perfect example of what I mean:

http://jsfiddle.net/whkQw/20/

HOWEVER, unlike the above example, I have a separate set of options to display in the dropdown box for EACH option selected in the first dropdown box, and not just for one of the options. In other words, in the above example, if you select "China" the second dropdown box will appear, but if you select anything else it will remain hidden. That's not what I want. I want a different dropdown to display if you selected "Taiwan", and yet a different dropdown to display if you selected "Germany", and etc. for each option. I tried to simply duplicate the javascript in that example for each option, changing the name tags accordingly, but that didn't work (I am a newbie when it comes to Javascript).

So I ran across this example, which is exactly the sort of thing I am looking for:

http://jsfiddle.net/e9XvP/

Yet for some reason this code doesn't seem to work for me. It has no effect at all; the second dropdown simply remains hidden regardless of what is selected. My dropdown lists are much more numerous and lengthy than the one in the above example. Here is the HTML I have right now:

Dropdown 1

<div class="ccms_form_element cfdiv_custom" id="style_container_div">
<label>Choose Rank: </label><select size="1" id="Rank" class=" validate['required']" title="" type="select" name="Rank">
    <option value="">-Select Your Rank-</option>
    <option value="Airman">Airman</option>
    <option value="Airman First Class">Airman First Class</option>
    <option value="Senior Airman">Senior Airman</option>
    <option value="Staff Sergeant">Staff Sergeant</option>
    <option value="Senior Master Sergeant">Senior Master Sergeant</option>
</select><div class="clear"></div><div id="error-message-style"></div></div>

Dropdown 2:

<div id="Airman"  class="style-sub-1"  style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
  <label>Which Job? </label>
    <select id="Airman" name="Airman">
      <option value="">-Choose A Job-</option>
      <option value="Basic Ore Miner - Level 1a">Basic Ore Miner - Level 1</option>
      <option value="Basic Ore Miner - Level 2a">Basic Ore Miner - Level 2</option>
      <option value="Basic Ore Miner - Level 3a">Basic Ore Miner - Level 3</option>
      <option value="Basic Ore Miner - Level 4a">Basic Ore Miner - Level 4</option>
      <option value="Basic Ore Miner - Level 5a">Basic Ore Miner - Level 5</option>
      <option value="Basic Ore Miner - Level 6a">Basic Ore Miner - Level 6</option>
      <option value="Basic Ore Miner - Level 7a">Basic Ore Miner - Level 7</option>
      <option value="Plagioclase Miner - Level 1a">Plagioclase Miner - Level 1</option>
      <option value="Plagioclase Miner - Level 2a">Plagioclase Miner - Level 2</option>
      <option value="Plagioclase Miner - Level 3a">Plagioclase Miner - Level 3</option>
      <option value="Plagioclase Miner - Level 4a">Plagioclase Miner - Level 4</option>
      <option value="Plagioclase Miner - Level 5a">Plagioclase Miner - Level 5</option>
      <option value="Plagioclase Miner - Level 6a">Plagioclase Miner - Level 6</option>
      <option value="Plagioclase Miner - Level 7a">Plagioclase Miner - Level 7</option>
      <option value="Omber Miner - Level 1a">Omber Miner - Level 1</option>
      <option value="Omber Miner - Level 2a">Omber Miner - Level 2</option>
      <option value="Omber Miner - Level 3a">Omber Miner - Level 3</option>
      <option value="Omber Miner - Level 4a">Omber Miner - Level 4</option>
      <option value="Omber Miner - Level 5a">Omber Miner - Level 5</option>
      <option value="Omber Miner - Level 6a">Omber Miner - Level 6</option>
      <option value="Omber Miner - Level 7a">Omber Miner - Level 7</option>
      <option value="lvl-1 Mission Runner - Level 1a">lvl-1 Mission Runner - Level 1</option>
      <option value="lvl-1 Mission Runner - Level 2a">lvl-1 Mission Runner - Level 2</option>
      <option value="lvl-1 Mission Runner - Level 3a">lvl-1 Mission Runner - Level 3</option>
      <option value="lvl-1 Mission Runner - Level 4a">lvl-1 Mission Runner - Level 4</option>
      <option value="lvl-1 Mission Runner - Level 5a">lvl-1 Mission Runner - Level 5</option>
      <option value="lvl-1 Mission Runner - Level 6a">lvl-1 Mission Runner - Level 6</option>
      <option value="lvl-1 Mission Runner - Level 7a">lvl-1 Mission Runner - Level 7</option>
      <option value="lvl-2 Mission Runner - Level 1a">lvl-2 Mission Runner - Level 1</option>
      <option value="lvl-2 Mission Runner - Level 2a">lvl-2 Mission Runner - Level 2</option>
      <option value="lvl-2 Mission Runner - Level 3a">lvl-2 Mission Runner - Level 3</option>
      <option value="lvl-2 Mission Runner - Level 4a">lvl-2 Mission Runner - Level 4</option>
      <option value="lvl-2 Mission Runner - Level 5a">lvl-2 Mission Runner - Level 5</option>
      <option value="lvl-2 Mission Runner - Level 6a">lvl-2 Mission Runner - Level 6</option>
      <option value="lvl-2 Mission Runner - Level 7a">lvl-2 Mission Runner - Level 7</option>
      <option value="lvl-3 Mission Runner - Level 1a">lvl-3 Mission Runner - Level 1</option>
      <option value="lvl-3 Mission Runner - Level 2a">lvl-3 Mission Runner - Level 2</option>
      <option value="lvl-3 Mission Runner - Level 3a">lvl-3 Mission Runner - Level 3</option>
      <option value="lvl-3 Mission Runner - Level 4a">lvl-3 Mission Runner - Level 4</option>
      <option value="lvl-3 Mission Runner - Level 5a">lvl-3 Mission Runner - Level 5</option>
      <option value="lvl-3 Mission Runner - Level 6a">lvl-3 Mission Runner - Level 6</option>
      <option value="lvl-3 Mission Runner - Level 7a">lvl-3 Mission Runner - Level 7</option>
      <option value="lvl-4 Mission Runner - Level 1a">lvl-4 Mission Runner - Level 1</option>
      <option value="lvl-4 Mission Runner - Level 2a">lvl-4 Mission Runner - Level 2</option>
      <option value="lvl-4 Mission Runner - Level 3a">lvl-4 Mission Runner - Level 3</option>
      <option value="lvl-4 Mission Runner - Level 4a">lvl-4 Mission Runner - Level 4</option>
      <option value="lvl-4 Mission Runner - Level 5a">lvl-4 Mission Runner - Level 5</option>
      <option value="lvl-4 Mission Runner - Level 6a">lvl-4 Mission Runner - Level 6</option>
      <option value="lvl-4 Mission Runner - Level 7a">lvl-4 Mission Runner - Level 7</option>
    </select>
</div>
<div id="Airman First Class"  class="style-sub-1"  style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
  <label>Which Job? </label>
    <select id="Airman First Class" name="Airman First Class">
    <option value="">-Choose A Job-</option>
      <option value="Basic Ore Miner - Level 1b">Basic Ore Miner - Level 1</option>
      <option value="Basic Ore Miner - Level 2b">Basic Ore Miner - Level 2</option>
      <option value="Basic Ore Miner - Level 3b">Basic Ore Miner - Level 3</option>
      <option value="Basic Ore Miner - Level 4b">Basic Ore Miner - Level 4</option>
      <option value="Basic Ore Miner - Level 5b">Basic Ore Miner - Level 5</option>
      <option value="Basic Ore Miner - Level 6b">Basic Ore Miner - Level 6</option>
      <option value="Basic Ore Miner - Level 7b">Basic Ore Miner - Level 7</option>
      <option value="Plagioclase Miner - Level 1b">Plagioclase Miner - Level 1</option>
      <option value="Plagioclase Miner - Level 2b">Plagioclase Miner - Level 2</option>
      <option value="Plagioclase Miner - Level 3b">Plagioclase Miner - Level 3</option>
      <option value="Plagioclase Miner - Level 4b">Plagioclase Miner - Level 4</option>
      <option value="Plagioclase Miner - Level 5b">Plagioclase Miner - Level 5</option>
      <option value="Plagioclase Miner - Level 6b">Plagioclase Miner - Level 6</option>
      <option value="Plagioclase Miner - Level 7b">Plagioclase Miner - Level 7</option>
      <option value="Omber Miner - Level 1b">Omber Miner - Level 1</option>  
      <option value="Omber Miner - Level 2b">Omber Miner - Level 2</option>
      <option value="Omber Miner - Level 3b">Omber Miner - Level 3</option>
      <option value="Omber Miner - Level 4b">Omber Miner - Level 4</option>
      <option value="Omber Miner - Level 5b">Omber Miner - Level 5</option>
      <option value="Omber Miner - Level 6b">Omber Miner - Level 6</option>
      <option value="Omber Miner - Level 7b">Omber Miner - Level 7</option>
      <option value="lvl-1 Mission Runner - Level 1b">lvl-1 Mission Runner - Level 1</option>
      <option value="lvl-1 Mission Runner - Level 2b">lvl-1 Mission Runner - Level 2</option>
      <option value="lvl-1 Mission Runner - Level 3b">lvl-1 Mission Runner - Level 3</option>
      <option value="lvl-1 Mission Runner - Level 4b">lvl-1 Mission Runner - Level 4</option>
      <option value="lvl-1 Mission Runner - Level 5b">lvl-1 Mission Runner - Level 5</option>
      <option value="lvl-1 Mission Runner - Level 6b">lvl-1 Mission Runner - Level 6</option>
      <option value="lvl-1 Mission Runner - Level 7b">lvl-1 Mission Runner - Level 7</option>
      <option value="lvl-2 Mission Runner - Level 1b">lvl-2 Mission Runner - Level 1</option>
       <option value="lvl-2 Mission Runner - Level 2b">lvl-2 Mission Runner - Level 2</option>
       <option value="lvl-2 Mission Runner - Level 3b">lvl-2 Mission Runner - Level 3</option>
       <option value="lvl-2 Mission Runner - Level 4b">lvl-2 Mission Runner - Level 4</option>
       <option value="lvl-2 Mission Runner - Level 5b">lvl-2 Mission Runner - Level 5</option>
       <option value="lvl-2 Mission Runner - Level 6b">lvl-2 Mission Runner - Level 6</option>
       <option value="lvl-2 Mission Runner - Level 7b">lvl-2 Mission Runner - Level 7</option>
      <option value="lvl-3 Mission Runner - Level 1b">lvl-3 Mission Runner - Level 1</option>
       <option value="lvl-3 Mission Runner - Level 2b">lvl-3 Mission Runner - Level 2</option>
       <option value="lvl-3 Mission Runner - Level 3b">lvl-3 Mission Runner - Level 3</option>
       <option value="lvl-3 Mission Runner - Level 4b">lvl-3 Mission Runner - Level 4</option>
       <option value="lvl-3 Mission Runner - Level 5b">lvl-3 Mission Runner - Level 5</option>
       <option value="lvl-3 Mission Runner - Level 6b">lvl-3 Mission Runner - Level 6</option>
       <option value="lvl-3 Mission Runner - Level 7b">lvl-3 Mission Runner - Level 7</option>
      <option value="lvl-4 Mission Runner - Level 1b">lvl-4 Mission Runner - Level 1</option>
       <option value="lvl-4 Mission Runner - Level 2b">lvl-4 Mission Runner - Level 2</option>
       <option value="lvl-4 Mission Runner - Level 3b">lvl-4 Mission Runner - Level 3</option>
       <option value="lvl-4 Mission Runner - Level 4b">lvl-4 Mission Runner - Level 4</option>
       <option value="lvl-4 Mission Runner - Level 5b">lvl-4 Mission Runner - Level 5</option>
       <option value="lvl-4 Mission Runner - Level 6b">lvl-4 Mission Runner - Level 6</option>
       <option value="lvl-4 Mission Runner - Level 7b">lvl-4 Mission Runner - Level 7</option>
    </select>
</div>
<div id="Senior Airman"  class="style-sub-1"  style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
  <label>Which Job? </label>
    <select id="Senior Airman" name="Senior Airman">
    <option value="">-Choose A Job-</option>
      <option value="Basic Ore Miner - Level 1c">Basic Ore Miner - Level 1</option>
       <option value="Basic Ore Miner - Level 2c">Basic Ore Miner - Level 2</option>
       <option value="Basic Ore Miner - Level 3c">Basic Ore Miner - Level 3</option>
       <option value="Basic Ore Miner - Level 4c">Basic Ore Miner - Level 4</option>
       <option value="Basic Ore Miner - Level 5c">Basic Ore Miner - Level 5</option>
       <option value="Basic Ore Miner - Level 6c">Basic Ore Miner - Level 6</option>
       <option value="Basic Ore Miner - Level 7c">Basic Ore Miner - Level 7</option>
       <option value="Plagioclase Miner - Level 1c">Plagioclase Miner - Level 1</option>
       <option value="Plagioclase Miner - Level 2c">Plagioclase Miner - Level 2</option>
       <option value="Plagioclase Miner - Level 3c">Plagioclase Miner - Level 3</option>
       <option value="Plagioclase Miner - Level 4c">Plagioclase Miner - Level 4</option>
       <option value="Plagioclase Miner - Level 5c">Plagioclase Miner - Level 5</option>
       <option value="Plagioclase Miner - Level 6c">Plagioclase Miner - Level 6</option>
       <option value="Plagioclase Miner - Level 7c">Plagioclase Miner - Level 7</option>
       <option value="Omber Miner - Level 1c">Omber Miner - Level 1</option>  
       <option value="Omber Miner - Level 2c">Omber Miner - Level 2</option>
       <option value="Omber Miner - Level 3c">Omber Miner - Level 3</option>
       <option value="Omber Miner - Level 4c">Omber Miner - Level 4</option>
       <option value="Omber Miner - Level 5c">Omber Miner - Level 5</option>
       <option value="Omber Miner - Level 6c">Omber Miner - Level 6</option>
       <option value="Omber Miner - Level 7c">Omber Miner - Level 7</option>
       <option value="lvl-1 Mission Runner - Level 1c">lvl-1 Mission Runner - Level 1</option>
       <option value="lvl-1 Mission Runner - Level 2c">lvl-1 Mission Runner - Level 2</option>
       <option value="lvl-1 Mission Runner - Level 3c">lvl-1 Mission Runner - Level 3</option>
       <option value="lvl-1 Mission Runner - Level 4c">lvl-1 Mission Runner - Level 4</option>
       <option value="lvl-1 Mission Runner - Level 5c">lvl-1 Mission Runner - Level 5</option>
       <option value="lvl-1 Mission Runner - Level 6c">lvl-1 Mission Runner - Level 6</option>
       <option value="lvl-1 Mission Runner - Level 7c">lvl-1 Mission Runner - Level 7</option>
       <option value="lvl-2 Mission Runner - Level 1c">lvl-2 Mission Runner - Level 1</option>
       <option value="lvl-2 Mission Runner - Level 2c">lvl-2 Mission Runner - Level 2</option>
       <option value="lvl-2 Mission Runner - Level 3c">lvl-2 Mission Runner - Level 3</option>
       <option value="lvl-2 Mission Runner - Level 4c">lvl-2 Mission Runner - Level 4</option>
       <option value="lvl-2 Mission Runner - Level 5c">lvl-2 Mission Runner - Level 5</option>
       <option value="lvl-2 Mission Runner - Level 6c">lvl-2 Mission Runner - Level 6</option>
       <option value="lvl-2 Mission Runner - Level 7c">lvl-2 Mission Runner - Level 7</option>
       <option value="lvl-3 Mission Runner - Level 1c">lvl-3 Mission Runner - Level 1</option>
       <option value="lvl-3 Mission Runner - Level 2c">lvl-3 Mission Runner - Level 2</option>
       <option value="lvl-3 Mission Runner - Level 3c">lvl-3 Mission Runner - Level 3</option>
       <option value="lvl-3 Mission Runner - Level 4c">lvl-3 Mission Runner - Level 4</option>
       <option value="lvl-3 Mission Runner - Level 5c">lvl-3 Mission Runner - Level 5</option>
       <option value="lvl-3 Mission Runner - Level 6c">lvl-3 Mission Runner - Level 6</option>
       <option value="lvl-3 Mission Runner - Level 7c">lvl-3 Mission Runner - Level 7</option>
       <option value="lvl-4 Mission Runner - Level 1c">lvl-4 Mission Runner - Level 1</option>
       <option value="lvl-4 Mission Runner - Level 2c">lvl-4 Mission Runner - Level 2</option>
       <option value="lvl-4 Mission Runner - Level 3c">lvl-4 Mission Runner - Level 3</option>
       <option value="lvl-4 Mission Runner - Level 4c">lvl-4 Mission Runner - Level 4</option>
       <option value="lvl-4 Mission Runner - Level 5c">lvl-4 Mission Runner - Level 5</option>
       <option value="lvl-4 Mission Runner - Level 6c">lvl-4 Mission Runner - Level 6</option>
       <option value="lvl-4 Mission Runner - Level 7c">lvl-4 Mission Runner - Level 7</option>
    </select>
</div>
<div id="Staff Sergeant"  class="style-sub-1"  style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
  <label>Which Job? </label>
    <select id="Staff Sergeant" name="Staff Sergeant">
    <option value="">-Choose A Job-</option>
      <option value="Basic Ore Miner - Level 1d">Basic Ore Miner - Level 1</option>
       <option value="Basic Ore Miner - Level 2d">Basic Ore Miner - Level 2</option>
       <option value="Basic Ore Miner - Level 3d">Basic Ore Miner - Level 3</option>
       <option value="Basic Ore Miner - Level 4d">Basic Ore Miner - Level 4</option>
       <option value="Basic Ore Miner - Level 5d">Basic Ore Miner - Level 5</option>
       <option value="Basic Ore Miner - Level 6d">Basic Ore Miner - Level 6</option>
       <option value="Basic Ore Miner - Level 7d">Basic Ore Miner - Level 7</option>
       <option value="Plagioclase Miner - Level 1d">Plagioclase Miner - Level 1</option>
       <option value="Plagioclase Miner - Level 2d">Plagioclase Miner - Level 2</option>
       <option value="Plagioclase Miner - Level 3d">Plagioclase Miner - Level 3</option>
       <option value="Plagioclase Miner - Level 4d">Plagioclase Miner - Level 4</option>
       <option value="Plagioclase Miner - Level 5d">Plagioclase Miner - Level 5</option>
       <option value="Plagioclase Miner - Level 6d">Plagioclase Miner - Level 6</option>
       <option value="Plagioclase Miner - Level 7d">Plagioclase Miner - Level 7</option>
       <option value="Omber Miner - Level 1d">Omber Miner - Level 1</option>  
       <option value="Omber Miner - Level 2d">Omber Miner - Level 2</option>
       <option value="Omber Miner - Level 3d">Omber Miner - Level 3</option>
       <option value="Omber Miner - Level 4d">Omber Miner - Level 4</option>
       <option value="Omber Miner - Level 5d">Omber Miner - Level 5</option>
       <option value="Omber Miner - Level 6d">Omber Miner - Level 6</option>
       <option value="Omber Miner - Level 7d">Omber Miner - Level 7</option>
      <option value="lvl-1 Mission Runner - Level 1d">lvl-1 Mission Runner - Level 1</option>
      <option value="lvl-1 Mission Runner - Level 2d">lvl-1 Mission Runner - Level 2</option>
      <option value="lvl-1 Mission Runner - Level 3d">lvl-1 Mission Runner - Level 3</option>
      <option value="lvl-1 Mission Runner - Level 4d">lvl-1 Mission Runner - Level 4</option>
      <option value="lvl-1 Mission Runner - Level 5d">lvl-1 Mission Runner - Level 5</option>
      <option value="lvl-1 Mission Runner - Level 6d">lvl-1 Mission Runner - Level 6</option>
      <option value="lvl-1 Mission Runner - Level 7d">lvl-1 Mission Runner - Level 7</option>
      <option value="lvl-2 Mission Runner - Level 1d">lvl-2 Mission Runner - Level 1</option>
       <option value="lvl-2 Mission Runner - Level 2d">lvl-2 Mission Runner - Level 2</option>
       <option value="lvl-2 Mission Runner - Level 3d">lvl-2 Mission Runner - Level 3</option>
       <option value="lvl-2 Mission Runner - Level 4d">lvl-2 Mission Runner - Level 4</option>
       <option value="lvl-2 Mission Runner - Level 5d">lvl-2 Mission Runner - Level 5</option>
       <option value="lvl-2 Mission Runner - Level 6d">lvl-2 Mission Runner - Level 6</option>
       <option value="lvl-2 Mission Runner - Level 7d">lvl-2 Mission Runner - Level 7</option>
      <option value="lvl-3 Mission Runner - Level 1d">lvl-3 Mission Runner - Level 1</option>
       <option value="lvl-3 Mission Runner - Level 2d">lvl-3 Mission Runner - Level 2</option>
       <option value="lvl-3 Mission Runner - Level 3d">lvl-3 Mission Runner - Level 3</option>
       <option value="lvl-3 Mission Runner - Level 4d">lvl-3 Mission Runner - Level 4</option>
       <option value="lvl-3 Mission Runner - Level 5d">lvl-3 Mission Runner - Level 5</option>
       <option value="lvl-3 Mission Runner - Level 6d">lvl-3 Mission Runner - Level 6</option>
       <option value="lvl-3 Mission Runner - Level 7d">lvl-3 Mission Runner - Level 7</option>
      <option value="lvl-4 Mission Runner - Level 1d">lvl-4 Mission Runner - Level 1</option>
       <option value="lvl-4 Mission Runner - Level 2d">lvl-4 Mission Runner - Level 2</option>
       <option value="lvl-4 Mission Runner - Level 3d">lvl-4 Mission Runner - Level 3</option>
       <option value="lvl-4 Mission Runner - Level 4d">lvl-4 Mission Runner - Level 4</option>
       <option value="lvl-4 Mission Runner - Level 5d">lvl-4 Mission Runner - Level 5</option>
       <option value="lvl-4 Mission Runner - Level 6d">lvl-4 Mission Runner - Level 6</option>
       <option value="lvl-4 Mission Runner - Level 7d">lvl-4 Mission Runner - Level 7</option>
    </select>
</div>
<div id="Senior Master Sergeant"  class="style-sub-1"  style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
  <label>Which Job? </label>
    <select id="Senior Master Sergeant" name="Senior Master Sergeant">
    <option value="">-Choose A Job-</option>
      <option value="Basic Ore Miner - Level 1e">Basic Ore Miner - Level 1</option>
       <option value="Basic Ore Miner - Level 2e">Basic Ore Miner - Level 2</option>
       <option value="Basic Ore Miner - Level 3e">Basic Ore Miner - Level 3</option>
       <option value="Basic Ore Miner - Level 4e">Basic Ore Miner - Level 4</option>
       <option value="Basic Ore Miner - Level 5e">Basic Ore Miner - Level 5</option>
       <option value="Basic Ore Miner - Level 6e">Basic Ore Miner - Level 6</option>
       <option value="Basic Ore Miner - Level 7e">Basic Ore Miner - Level 7</option>
       <option value="Plagioclase Miner - Level 1e">Plagioclase Miner - Level 1</option>
       <option value="Plagioclase Miner - Level 2e">Plagioclase Miner - Level 2</option>
       <option value="Plagioclase Miner - Level 3e">Plagioclase Miner - Level 3</option>
       <option value="Plagioclase Miner - Level 4e">Plagioclase Miner - Level 4</option>
       <option value="Plagioclase Miner - Level 5e">Plagioclase Miner - Level 5</option>
       <option value="Plagioclase Miner - Level 6e">Plagioclase Miner - Level 6</option>
       <option value="Plagioclase Miner - Level 7e">Plagioclase Miner - Level 7</option>
       <option value="Omber Miner - Level 1e">Omber Miner - Level 1</option>  
       <option value="Omber Miner - Level 2e">Omber Miner - Level 2</option>
       <option value="Omber Miner - Level 3e">Omber Miner - Level 3</option>
       <option value="Omber Miner - Level 4e">Omber Miner - Level 4</option>
       <option value="Omber Miner - Level 5e">Omber Miner - Level 5</option>
       <option value="Omber Miner - Level 6e">Omber Miner - Level 6</option>
       <option value="Omber Miner - Level 7e">Omber Miner - Level 7</option>
      <option value="lvl-1 Mission Runner - Level 1e">lvl-1 Mission Runner - Level 1</option>
      <option value="lvl-1 Mission Runner - Level 2e">lvl-1 Mission Runner - Level 2</option>
      <option value="lvl-1 Mission Runner - Level 3e">lvl-1 Mission Runner - Level 3</option>
      <option value="lvl-1 Mission Runner - Level 4e">lvl-1 Mission Runner - Level 4</option>
      <option value="lvl-1 Mission Runner - Level 5e">lvl-1 Mission Runner - Level 5</option>
      <option value="lvl-1 Mission Runner - Level 6e">lvl-1 Mission Runner - Level 6</option>
      <option value="lvl-1 Mission Runner - Level 7e">lvl-1 Mission Runner - Level 7</option>
      <option value="lvl-2 Mission Runner - Level 1e">lvl-2 Mission Runner - Level 1</option>
       <option value="lvl-2 Mission Runner - Level 2e">lvl-2 Mission Runner - Level 2</option>
       <option value="lvl-2 Mission Runner - Level 3e">lvl-2 Mission Runner - Level 3</option>
       <option value="lvl-2 Mission Runner - Level 4e">lvl-2 Mission Runner - Level 4</option>
       <option value="lvl-2 Mission Runner - Level 5e">lvl-2 Mission Runner - Level 5</option>
       <option value="lvl-2 Mission Runner - Level 6e">lvl-2 Mission Runner - Level 6</option>
       <option value="lvl-2 Mission Runner - Level 7e">lvl-2 Mission Runner - Level 7</option>
      <option value="lvl-3 Mission Runner - Level 1e">lvl-3 Mission Runner - Level 1</option>
       <option value="lvl-3 Mission Runner - Level 2e">lvl-3 Mission Runner - Level 2</option>
       <option value="lvl-3 Mission Runner - Level 3e">lvl-3 Mission Runner - Level 3</option>
       <option value="lvl-3 Mission Runner - Level 4e">lvl-3 Mission Runner - Level 4</option>
       <option value="lvl-3 Mission Runner - Level 5e">lvl-3 Mission Runner - Level 5</option>
       <option value="lvl-3 Mission Runner - Level 6e">lvl-3 Mission Runner - Level 6</option>
       <option value="lvl-3 Mission Runner - Level 7e">lvl-3 Mission Runner - Level 7</option>
      <option value="lvl-4 Mission Runner - Level 1e">lvl-4 Mission Runner - Level 1</option>
       <option value="lvl-4 Mission Runner - Level 2e">lvl-4 Mission Runner - Level 2</option>
       <option value="lvl-4 Mission Runner - Level 3e">lvl-4 Mission Runner - Level 3</option>
       <option value="lvl-4 Mission Runner - Level 4e">lvl-4 Mission Runner - Level 4</option>
       <option value="lvl-4 Mission Runner - Level 5e">lvl-4 Mission Runner - Level 5</option>
       <option value="lvl-4 Mission Runner - Level 6e">lvl-4 Mission Runner - Level 6</option>
       <option value="lvl-4 Mission Runner - Level 7e">lvl-4 Mission Runner - Level 7</option>
    </select>
</div>
        <div class="clear"></div><div id="error-message-style-sub-1"></div></div>

As I stated, neither of the javascript codes in the above examples are working for me, and I am quite new to javascript (and not overly experienced in HTML either) so any suggestions?

Additionally, once the user makes a selection in the second dropdown box, I want a unique line of text (i.e. unique to their selection) to display underneath the dropdown box. Here's an example I found:

Toggle a hidden div when a particular dropdown option is selected/de-selected

However, again, unlike this exaple I don't want just one option to display text; I want a different line of text to display for any and every option selected. How would I go about modifying the code in this example to make that work?

I know this will likely turn out to be a large project, so don't worry about typing out everything for me if you can just give me a sample of what I have to do to modify the code so that it'll affect more than just one option. As you can probably guess by the size of this post, I am quite comfortable myself with writing to great lengths.

Any help would be much appreciated.

Thanks in advance.

like image 996
Scott Avatar asked Aug 05 '11 09:08

Scott

People also ask

How do I populate a dropdown list based on previous dropdown selected value?

You can use change event on your select-box . Inside this get value of selected option using $(this). val() this will return you array so use for-loop to iterate through value and show options where value matches in second dropdown . Lastly refresh your selectpicker to update changes .

How do I change a selection based on another dropdown?

We want to change the selects options based on other dropdowns so we will follow the below steps. Create a state variable that is initially null or undefined. Create different arrays for different dropdowns. Create a local variable say type that will hold any of the array based on the dropdown selected.

How do you display a selected value in a drop down list?

Method 1: Using the value property: The value of the selected element can be found by using the value property on the selected element that defines the list. This property returns a string representing the value attribute of the <option> element in the list. If no option is selected then nothing will be returned.

How Show hidden TextBox based on selected dropdown?

The Panel control is hidden by setting Visible property to False. Do you have Passport? When an item (option) is selected in the DropDownList, the selected value is checked. If the selected value is Y (Yes), then the TextBox will be visible else the TextBox will be hidden.

4 Answers

One way or another, you've already ended up with what's probably the easiest HTML markup to use for the job:

<select size="1" id="Rank" title="" name="Rank">
    <option value="">-Select Your Rank-</option>
    <option value="Airman">Airman</option>
    <option value="Airman First Class">Airman First Class</option>
    <option value="Senior Airman">Senior Airman</option>
    <option value="Staff Sergeant">Staff Sergeant</option>
    <option value="Senior Master Sergeant">Senior Master Sergeant</option>
</select>

and then one <element> container for each possibility of <option>.

<div>
    // For Airman
</div>
<div>
    // For Senior Airman
</div>

... etc etc...

I'd use this same layout for everything that depends on which <option> is selected; the unique-line-of-text you want, the other-select-box, etc etc. I'd wrap each one in a container element, so you can easily target all the elements as one.

<div class="container">
    <div>
        Line of text for Airman
    </div>
    <div>
        Line of text for Senior Airman
    </div>
</div>

<div class="container">
    <div>
        <select>
            <option>Airman Stuff</option>
        </select>
    </div>
    <div>
        <select>
            <option>Senior Airman Stuff</option>
        </select>
    </div>
</div>

Now whack a identifier to each of the <div>'s we've got, so when the "Airman" is selected, we know which <div>'s are the Airmans (so we know to show those ones!)

<div class="container">
    <div class="airman">
        Line of text for Airman
    </div>
    <div class="senior-airman">
        Line of text for Senior Airman
    </div>
</div>

<div class="container">
    <div class="airman">
        <select>
            <option>Airman Stuff</option>
        </select>
    </div>
    <div class="senior-airman">
        <select>
            <option>Senior Airman Stuff</option>
        </select>
    </div>
</div>

And add the same identifier to the <options>'s of the <select id="rank">:

<select size="1" id="Rank" title="" name="Rank">
    <option value="">-Select Your Rank-</option>
    <option value="airman">Airman</option>
    <option value="senior-airman">Senior Airman</option>
</select>

Now we've got this markup, applying the JavaScript for the hiding/showing is so easy!

$(document).ready(function () {
    $('#Rank').bind('change', function () {
        var elements = $('div.container').children().hide(); // hide all the elements
        var value = $(this).val();

        if (value.length) { // if somethings' selected
            elements.filter('.' + value).show(); // show the ones we want
        }
    }).trigger('change'); // Setup the initial states
});

Done; checkout an example: http://jsfiddle.net/3UWk2/1/

An update for your comment

The reason your attempt to change the code like you did didn't work is because we've currently got no event handler bound to the 2nd level <select> boxes; only to <select id="rank">

You need to basically repeat everything we've just done for the first level nav, for the second level nav. Instead of using an #id selector for the <select>, use a .class; because we've got more than one <select> element to target, and #id's have to be unique:

$('.second-level-select').bind('change', function () {
    var elements = $('div.second-level-container').children().hide(); // hide all the elements
    var value = $(this).val();

    if (value.length) { // if somethings' selected
        elements.filter('.' + value).show(); // show the ones we want
    }
}).trigger('change'); // Setup the initial states

We've also had to change the name of the div.container, to stop the <select> boxes hiding each others elements.

Check out an updated example here: http://jsfiddle.net/3UWk2/3/

like image 83
Matt Avatar answered Oct 20 '22 11:10

Matt

Wow that's a lot of code... but actually it was really easy to do with jQuery (if that's an option). See my example.

First thing you need to do is remove the spaces in the id's. That's generally bad. Secondly, you just show/hide based off of those values in the select list passing them as id's.

The jQuery (don't forget to include the jQuery link, though):

$("#Rank").change(function(){
   correspondingID = $(this).find(":selected").val()
   $(".style-sub-1").hide();
   $("#" + correspondingID).show();
})
like image 42
Joseph Marikle Avatar answered Oct 20 '22 11:10

Joseph Marikle

My solution and advice would be to use AJAX. If you have a lot of options and for each a lot of other options, there is no point in loading them all instantly. The idea is to send an AJAX request and update the second select with proper options. You can also store proper text for each option in the database.. in this way, you have everything you want and you do not force user to download unnecessary selects

like image 42
mkk Avatar answered Oct 20 '22 10:10

mkk

include html code first

 <!-------first dropdown----------->
    <select name="make" id="elements">
      <option value="">-</option>
      <option value="Satec" >Satec</option>
      <option data-val='m2' value="Masibus" >Masibus</option>
      <option data-val='m3' value="Pyrotech" >Pyrotech</option>
       <option data-val='m4' value="Schneider" >Schneider</option>

    </select>

    <!---------second dropdown---------->
    <select name="model" id="category">
      <option value="">-</option>
      <option value="PM130" >PM130</option>
      <option value="PM2160A" >PM2160A</option>
      <option value="MFM101" >MFM101</option>
       <option value="ABC" >ABC</option>
    </select>

after include js script

<script>
var category = document.getElementById('category');
document.getElementById('elements').onchange = function() {
  var optionSelected = this.options[this.selectedIndex];
  if (optionSelected.textContent != '-') {
    if (optionSelected.dataset.val === 'm2') {
      category.value = 'PM2160A';
    }
    else if (optionSelected.dataset.val === 'm3')  {
    category.value='MFM101';
}
    else if (optionSelected.dataset.val === 'm4')  {
    category.value='ABC';
}
    else {
      category.value = 'PM130';
    }
  } else {
    category.value = '';
  }
}
</script>

It will sure work.

like image 2
Deshal Kh Avatar answered Oct 20 '22 11:10

Deshal Kh
Sign in to Comment

Related questions

In Express.js why does code after res.json() still execute?
How to test if my method throws an observable error in angular2?
Using addEventListener and getElementsByClassName to pass an element id
posting data with Axios
MomentJS convert from UTC to desired timezone, not just local
Converting React function component to class component issue
Vue.js routes serving from subdirectory
How can you set path of match with MemoryRouter and Jest? (not location or history)
Access $refs from other components not in the same level as current component
Repeating a watermark on every print page? Javascript or css
Getting 'ngbCollapse' since it isn't a known property of 'div'. error after moving components into sub module
Typescript object destructuring is caught by ESLint no-unused-vars rule
Script Minification and Continuous Integration with MSBuild
find words in html page with javascript
JavaScript to reload the page as GET request
Google Maps: How to move zoom controls?
Setting headers in XDomainRequest or ActiveXObject('Microsoft.XMLHTTP')
What is difference between get() and eq() in jquery?
Including hidden data in an HTML page for javascript to process
HTML5 <script> declarations

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!