根据以前的下拉选项显示第二个下拉菜单
首先，我讨厌提出一个已经处理的问题，但你应该知道我在这个网站上find的其他选项并不适合我。
基本上，我想要构造一个简短的表单，其中有两个下拉框。 第一个总是显示，第二个是默认隐藏的。 当第一个下拉框中的某个选项被选中时，我想要显示第二个下拉框。 这是我的意思的一个完美的例子：
http://jsfiddle.net/whkQw/20/
然而，与上面的例子不同，我有一个单独的选项集，显示在第一个下拉框中select的每个选项的下拉框中，而不仅仅是其中的一个选项。 换句话说，在上面的例子中，如果你select“中国”，第二个下拉框会出现，但如果你select了其他东西，它将保持隐藏状态。 这不是我想要的。 如果您select了“台湾”，我想要显示一个不同的下拉菜单，如果您为每个选项select了“德国”等，还要显示不同的下拉菜单。 我试图简单地在每个选项中重复该示例中的JavaScript，相应地更改名称标签，但这并不起作用（当谈到Javascript时，我是一个新手）。
所以我碰到这个例子，这正是我正在寻找的东西：
http://jsfiddle.net/e9XvP/
但由于某种原因，这段代码似乎不适合我。 它根本没有任何作用; 不pipeselect什么，第二个下拉列表都保持隐藏状态。 我的下拉列表比上面例子中的更多，更冗长。 这里是我现在的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），所以有什么build议吗？
此外，一旦用户在第二个下拉框中进行select，我想要一个独特的文本行（即他们的select是唯一的）显示在下拉框下方。 这是我发现的一个例子：
select/取消select特定的下拉选项时，切换隐藏的div
然而，再次，不像这个例子，我不希望只有一个选项来显示文本; 我想要显示不同的文本行，以select任何选项。 我将如何去修改这个例子中的代码来完成这个工作？
我知道这可能会变成一个大项目，所以不要担心input所有的东西，如果你可以给我一个样本，我必须做的修改代码，以便它会影响更多只有一个select。 正如你可以猜测这篇文章的大小，我写了很多东西，我自己也很舒服。
任何帮助将不胜感激。
提前致谢。
无论如何，你已经结束了可能是最简单的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>
然后为每个<option>可能性添加一个<element>容器。
<div> // For Airman </div> <div> // For Senior Airman </div>
…等等…
我会使用这个相同的布局，取决于select哪个<option> ; 你想要的独特的文本行，其他的select框等等。我会把每一个包装在一个容器元素中，所以你可以很容易地将所有的元素作为一个元素。
<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>
现在，我们已经有了一个标识符，所以当select“Airman”时，我们知道哪个<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>
并将相同的标识符添加到<select id="rank">的<options> <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">
你需要基本上重复我们刚刚完成的第一级导航，第二级导航。 而不是使用#idselect器作为<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中的空格。 这通常是不好的。 其次，你只是显示/隐藏基于这些值在select列表中传递他们作为ID的。
jQuery（不要忘记包含jQuery链接，但是）：
$("#Rank").change(function(){ correspondingID = $(this).find(":selected").val() $(".style-sub-1").hide(); $("#" + correspondingID).show(); })
我的解决scheme和build议是使用AJAX。 如果你有很多的select，并为每个选项很多，没有意义的是立即加载它们。 这个想法是发送一个AJAX请求，并用适当的选项更新第二个select。 您还可以在数据库中存储每个选项的正确文本。这样，您就可以拥有所需的一切，而且不会强制用户下载不必要的select
首先包含html代码
<!-------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>
包含js脚本后
<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>
它肯定会工作。
