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

小编典典

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

css

首先，我讨厌提出一个已经解决的问题，但是您应该知道我在此站点上找到的其他选项对我不起作用。

基本上，我想构造一个简短的表格，其中有两个下拉框。始终显示第一个，默认情况下隐藏第二个。在第一个下拉框中选择某个选项后，我希望第二个下拉框显示。这是我的意思的完美示例：

但是，与上面的示例不同，我有单独的一组选项要显示在下拉框中，以显示在第一个下拉框中选择的每个选项，而不仅是其中一个选项。换句话说，在上面的示例中，如果您选择“中国”，则会出现第二个下拉框，但是如果您选择其他任何内容，它将保持隐藏状态。那不是我想要的
如果您选择“台湾”，我希望显示一个不同的下拉菜单，如果您选择“德国”，则希望每个选项显示一个不同的下拉菜单。我试图在该示例中为每个选项简单地复制javascript，相应地更改名称标签，但这没有用（关于Javascript，我是新手）。

但是由于某种原因，此代码似乎对我不起作用。它根本没有效果；无论选择什么，第二个下拉列表都将保持隐藏状态。我的下拉列表比上述示例中的列表更多且冗长。这是我现在拥有的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中过分体验），所以有什么建议吗？

另外，一旦用户在第二个下拉框中进行选择，我希望在该下拉框下方显示唯一的一行文本（即，对于他们的选择而言唯一的）。

但是，再次，与这个示例不同，我不希望只有一个选项可以显示文本。我希望选择的每个选项都显示不同的文本行。我将如何修改此示例中的代码以使其正常工作？

我知道这可能会变成一个很大的项目，所以如果您可以给我一些修改代码所需要做的事，以便对您造成的影响不大，请不必担心为我输入所有内容只是一种选择。正如您可能会通过这篇文章的大小猜测的那样，我对撰写大量文章感到很满意。

任何帮助将非常感激。

提前致谢。

阅读 272

2020-05-16

共1个答案

小编典典

一种或另一种方式，您已经获得了可能最简单的HTML标记来完成该工作：

<select size="1" id="Rank" title="" name="Rank">
    <option value="">-Select Your Rank-</option>
    <option value="Airman">Airman</option>
    <option value="Airman First Class">Airman First Class</option>
    <option value="Senior Airman">Senior Airman</option>
    <option value="Staff Sergeant">Staff Sergeant</option>
    <option value="Senior Master Sergeant">Senior Master Sergeant</option>
</select>

然后<element>每个可能性都有一个容器<option>。

<div>
    // For Airman
</div>
<div>
    // For Senior Airman
</div>

…等等等等…

对于要<option>选择哪个内容，我将使用相同的布局；我想要的唯一文本行，另一个选择框等。我将每个包裹在一个容器元素中，这样您就可以轻松地将所有元素作为一个目标。

<div class="container">
    <div>
        Line of text for Airman
    </div>
    <div>
        Line of text for Senior Airman
    </div>
</div>

<div class="container">
    <div>
        <select>
            <option>Airman Stuff</option>
        </select>
    </div>
    <div>
        <select>
            <option>Senior Airman Stuff</option>
        </select>
    </div>
</div>

现在为<div>我们所拥有的每一个<div>飞机分配一个标识符，因此，当选择“飞行员”时，我们知道哪些飞机是飞行员（所以我们知道要显示这些飞机！）

<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
});

您的评论更新

您尝试像您一样更改代码的尝试没有奏效的原因是，因为我们目前没有将事件处理程序绑定到第二级<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>框隐藏彼此的元素。

2020-05-16