问题描述
首先，我讨厌提出一个已经处理的问题，但你应该知道我在这个网站上找到的其他选项不是为我工作。
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:
然而，与上面的例子不同，我有一个单独的选项集显示在下拉框中，第一个下拉框，而不只是一个选项。换句话说，在上面的例子中，如果你选择中国，第二个下拉框将出现，但如果你选择其他任何东西，它将保持隐藏。这不是我想要的。如果您选择台湾，我想要一个不同的下拉列表，如果您选择德国等，则需要不同的下拉列表。我试图简单地复制在该示例中的javascript，每个选项，相应地改变名称标签，但是没有工作（我是一个新手，当谈到Javascript）。
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：
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:
下拉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中过度体验）所以任何建议？
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?
此外，一旦用户在第二个下拉框中进行选择，在下拉框下方显示的文本行（即它们的选择唯一的）。 Here’s an example I found:
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:
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?
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.
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.
Any help would be much appreciated.
Thanks in advance.
Thanks in advance.
推荐答案
One way or another, you’ve already ended up with what’s probably the easiest HTML markup to use for the job:
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>.
and then one <element> container for each possibility of <option>.
<div>
// For Airman
</div>
<div>
// For Senior Airman
</div>
... etc etc...
... 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.
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!)
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\">:
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!
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:
Done; checkout an example: http://jsfiddle.net/3UWk2/1/
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\">
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:
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.
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:
这篇关于根据上一个下拉列表选择显示第二个下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！