当前位置: 首页 > 面试题库 >

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

江俊能
2023-03-14
问题内容

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

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

但是,与上面的示例不同,我有单独的一组选项要显示在下拉框中,以显示在第一个下拉框中选择的每个选项,而不仅是其中一个选项。换句话说,在上面的示例中,如果您选择“中国”,则会出现第二个下拉框,但是如果您选择其他任何内容,它将保持隐藏状态。那不是我想要的
如果您选择“台湾”,我希望显示一个不同的下拉菜单,如果您选择“德国”,则希望每个选项显示一个不同的下拉菜单。我试图在该示例中为每个选项简单地复制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中过分体验),所以有什么建议吗?

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

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

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

任何帮助将非常感激。

提前致谢。


问题答案:

一种或另一种方式,您已经获得了可能最简单的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>框隐藏彼此的元素。



 类似资料:
  • 问题内容: 我有这样的MySQL表 区域表 … 和学校表 我的注册表中有多个选择(下拉)菜单。区域下拉列表如下所示 我想做的是,获取“区域” ID,然后基于“学校”表中的ID(先前选择的ID)填充学校下拉菜单。我是JS的新手。请帮助我修复它。提前谢谢。 问题答案:

  • 问题内容: 我有两个下拉菜单,其中的选项不是从数据库中获取的。 第一个,让用户选择一个类别。 第二个选项取决于第一个下拉菜单中的选择。例如,如果用户选择“ 第一个” 选项,则第二个下拉列表将显示 但是当用户改变主意,或先选择 第二个 选项时,第二个下拉列表现在将显示 我的问题是我该如何实现?不用数据库就可以做到吗? 谢谢! 问题答案: 参见下文,查看 不使用数据库 的 工作示例 。 使用MySQL

  • 问题内容: 我正在建立一个网站来学习编码,并且正在尝试建立一个工具,用户单击一个选择/下拉列表,其中包含从数据库 cat 提取的某些类别名称,然后另一个选择与从数据库 subcat 提取的子类别名称一起出现。这几乎与Yelp的(向下分类)完全一样,就像Yelp的(向下分类)一样。 我还做了一个图: 我已经有一个从 cat 数据库中提取的类别下拉列表: 我有一个从subcat数据库中提取的subca

  • 问题内容: 我试图使用AngularJS创建一个链接/级联的下拉列表(选择元素),但是我很难用我的对象属性过滤和更新“ selected”属性。 首次加载页面时,所选项目将被过滤并正确显示在下拉菜单中。更改父级下拉菜单后,子级选择项不会抓住已过滤列表中的第一个项,导致子级下拉项不会更新。 任何见解将不胜感激,请注意,我将父/子/孙子数组分开(而不是在子数组中),因为最终我将从SQL中的单独spoc

  • 我是使用selenium ide的新手。 我已经让我的代码的所有其他部分工作。 但是我目前有一个问题,让它在下拉菜单中选择一个选项。 我为下拉列表和

  • 问题内容: 我正在一个涉及使用PHP脚本自动填充选择框的网站上工作。除了问题是我用来填充文本框的标题非常长(它们是期刊文章和演示文稿标题)外,所有其他方法都工作正常。下拉框延伸到最长元素的宽度,该元素延伸超出屏幕边缘,因此使滚动条无法触及。我尝试了多种尝试使用CSS手动将下拉框设置为特定宽度的方法,但到目前为止都无济于事。我所能做到的最好的事情是将“选择”框设置为一定的宽度,但是下拉菜单本身要宽得