Sunday, May 19, 2024
Homepage · css
 Popular · Latest · Hot · Upcoming
165
rated 0 times [  166] [ 1]  / answers: 1 / hits: 77742  / 13 Years ago, fri, august 5, 2011, 12:00:00

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.


More From » css
 Answers
15

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/


[#90801] Thursday, August 4, 2011, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
deonkalvinw
Add To Favorites
Follow
Total Points: 409
Total Questions: 96
Total Answers: 89
Location: Saint Pierre and Miquelon
Member since Sun, Nov 27, 2022
2 Years ago
deonkalvinw questions
Sun, Feb 6, 22, 00:00, 2 Years ago
Tue, Dec 28, 21, 00:00, 2 Years ago
Tue, Dec 28, 21, 00:00, 2 Years ago
Sun, Aug 22, 21, 00:00, 3 Years ago
Sun, Mar 7, 21, 00:00, 3 Years ago
View All
;