Sco*_*ott 18 html javascript css drop-down-menu
首先,我讨厌提出已经处理过的问题,但你应该知道我在这个网站上找到的其他选项对我不起作用.
基本上,我想构建一个简短的表单,其中有两个下拉框.第一个始终显示,第二个默认隐藏.当选择第一个下拉框中的某个选项时,我想要显示第二个下拉框.这是我的意思的完美例子:
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:
但由于某些原因,这段代码似乎对我不起作用.它完全没有效果; 无论选择什么,第二个下拉列表都会保持隐藏状态.我的下拉列表比上例中的下拉列表要多得多且冗长.这是我现在的HTML:
下拉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>
下拉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>
正如我所说,以上示例中的javascript代码都不适用于我,而且我对javascript很新(并且在HTML中也没有过多经验)所以有什么建议吗？
此外,一旦用户在第二个下拉框中进行选择,我想要一个独特的文本行(即他们选择的唯一文本)显示在下拉框下方.这是我发现的一个例子:
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.
Mat*_*att 16
无论如何,您已经最终得到了可能最简单的HTML标记用于工作:
<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>
然后是<element>每个可能性的一个容器<option>.
<div>
// For Airman
</div>
<div>
// For Senior Airman
</div>
......等等......
我将使用相同的布局来取决于<option>所选择的所有内容; 您想要的唯一文本行,其他选择框等等.我将每个文本包装在容器元素中,这样您就可以轻松地将所有元素作为一个元素.
<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>
现在打破<div>我们所拥有的每个人的标识符,所以当选择"飞行员"时,我们知道哪些<div>是Airmans(所以我们知道要显示那些!)
<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>
而同样的标识符添加到<options>"在S <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>
现在我们已经有了这个标记,应用JavaScript来隐藏/显示是如此简单!
$(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
});
完成; 结帐一个例子:http://jsfiddle.net/3UWk2/1/
您尝试更改代码的尝试不起作用的原因是因为我们目前没有绑定到第二级<select>框的事件处理程序; 只有<select id="rank">
你需要基本上重复我们刚刚为第一级导航做的所有事情,对于二级导航.而不是使用#id选择器<select>,使用.class; 因为我们有多个<select>元素要定位,并且#id必须是唯一的:
$('.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
我们还必须更改名称div.container,以阻止<select>隐藏对方元素的框.
在这里查看更新的示例:http://jsfiddle.net/3UWk2/3/
哇,这是很多代码...但实际上用jQuery很容易(如果这是一个选项).看看我的例子.
您需要做的第一件事是删除id中的空格.这通常很糟糕.其次,您只需显示/隐藏选择列表中的那些值,将它们作为id传递.
jQuery(不要忘记包含jQuery链接):
$("#Rank").change(function(){
correspondingID = $(this).find(":selected").val()
$(".style-sub-1").hide();
$("#" + correspondingID).show();
})
| 归档时间： |
|
| 查看次数： |
67075 次 |
| 最近记录： |