gpt4 book ai didi

javascript - 根据先前的下拉选择显示第二个下拉菜单

转载 作者:技术小花猫 更新时间:2023-10-29 12:07:18 27 4
gpt4 key购买 nike

首先,我讨厌提出一个已经处理过的问题,但你应该知道我在这个网站上找到的其他选项对我不起作用。

基本上,我想构建一个包含两个下拉框的简短表单。第一个始终显示,第二个默认隐藏。选择第一个下拉框中的某个选项后,我希望显示第二个下拉框。这是我的意思的一个完美例子:

http://jsfiddle.net/whkQw/20/

但是,与上面的示例不同,我有一组单独的选项显示在第一个下拉框中选择的每个选项的下拉框中,而不仅仅是其中一个选项。换句话说,在上面的例子中,如果你选择“中国”,第二个下拉框就会出现,但如果你选择其他任何东西,它就会保持隐藏状态。那不是我想要的。如果您选择“台湾”,我希望显示一个不同的下拉列表,如果您选择“德国”,我希望显示一个不同的下拉列表,等等。我试图简单地为每个选项复制该示例中的 javascript,相应地更改名称标签,但这没有用(我是 Javascript 的新手)。

所以我遇到了这个例子,这正是我正在寻找的东西:

http://jsfiddle.net/e9XvP/

但出于某种原因,这段代码似乎对我不起作用。它根本没有作用;无论选择什么,第二个下拉列表都会保持隐藏状态。我的下拉列表比上例中的下拉列表更多和更长。这是我现在拥有的 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 方面也没有太多经验)所以有什么建议吗?

此外,一旦用户在第二个下拉框中做出选择,我希望在下拉框下方显示一行唯一的文本(即他们的选择是唯一的)。这是我找到的一个例子:

Toggle a hidden div when a particular dropdown option is selected/de-selected

然而,与这个例子不同的是,我不希望只有一个选项来显示文本;我希望为所选的每个选项显示不同的文本行。我将如何着手修改此示例中的代码以使其正常工作?

我知道这可能会变成一个大元素,所以如果你能给我一个我必须做的修改代码的示例,那么不要担心为我输入所有内容,以便它会影响不止一个选项。正如您可能会根据这篇文章的篇幅猜到的那样,我很乐意写很长的篇幅。

如有任何帮助,我们将不胜感激。

提前致谢。

最佳答案

不管怎样,您已经得到了可能最容易用于该工作的 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> 分配一个标识符's we've got, so when the "Airman"is selected, we know which <div>是飞行员(所以我们知道要展示那些!)

<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><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/

您评论的更新

您尝试像您一样更改代码的尝试没有奏效的原因是因为我们目前没有绑定(bind)到第二级的事件处理程序 <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/

关于javascript - 根据先前的下拉选择显示第二个下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6954556/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com