根据以前的下拉选项显示第二个下拉菜单

首先,我讨厌提出一个已经处理的问题,但你应该知道我在这个网站上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> 

它肯定会工作。