当前位置：theitroad>Javascript 根据上一个下拉列表选择显示第二个下拉列表

Javascript 根据上一个下拉列表选择显示第二个下拉列表

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/6954556/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-23 23:56:43 　来源:igfitidea点击:

Show a second dropdown based on previous dropdown selection

javascriptcsshtmldrop-down-menu

提问by Scott

First off, I hate bringing up an issue that has already been dealt with, but you should know the other options I have found on this site aren't working for me.

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

Basically, I want to construct a short form where there are two dropdown boxes. The first is always shown, the second is hidden by default. When a certain option in the first dropdown box is selected, I then want the second dropdown box to show. This is a perfect example of what I mean:

基本上，我想构建一个简短的表单，其中有两个下拉框。第一个始终显示，第二个默认隐藏。When a certain option in the first dropdown box is selected, I then want the second dropdown box to show. 这是我的意思的一个完美例子：

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

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

HOWEVER, unlike the above example, I have a separate set of options to display in the dropdown box for EACH option selected in the first dropdown box, and not just for one of the options. In other words, in the above example, if you select "China" the second dropdown box will appear, but if you select anything else it will remain hidden. That's not what I want. I want a different dropdown to display if you selected "Taiwan", and yet a different dropdown to display if you selected "Germany", and etc. for each option. I tried to simply duplicate the javascript in that example for each option, changing the name tags accordingly, but that didn't work (I am a newbie when it comes to Javascript).

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

So I ran across this example, which is exactly the sort of thing I am looking for:

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

http://jsfiddle.net/e9XvP/

http://jsfiddle.net/e9XvP/

Yet for some reason this code doesn't seem to work for me. It has no effect at all; the second dropdown simply remains hidden regardless of what is selected. My dropdown lists are much more numerous and lengthy than the one in the above example. Here is the HTML I have right now:

然而出于某种原因，这段代码似乎对我不起作用。它根本没有效果；无论选择什么，第二个下拉菜单都保持隐藏状态。我的下拉列表比上例中的要多得多，而且要长得多。这是我现在拥有的 HTML：

Dropdown 1

下拉菜单 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>

Dropdown 2:

下拉列表 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>

As I stated, neither of the javascript codes in the above examples are working for me, and I am quite new to javascript (and not overly experienced in HTML either) so any suggestions?

正如我所说，上述示例中的任何 javascript 代码都不适用于我，而且我对 javascript 很陌生（并且对 HTML 也没有过多的经验）所以有什么建议吗？

Additionally, once the user makes a selection in the second dropdown box, I want a unique line of text (i.e. unique to their selection) to display underneath the dropdown box. Here's an example I found:

此外，一旦用户在第二个下拉框中进行了选择，我希望在下拉框下方显示一行唯一的文本（即他们的选择所独有的）。这是我找到的一个例子：

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

选择/取消选择特定下拉选项时切换隐藏的 div

However, again, unlike this exaple I don't want just one option to display text; I want a different line of text to display for any and every option selected. How would I go about modifying the code in this example to make that work?

然而，同样，与这个例子不同，我不希望只有一个选项来显示文本；我希望为所选的每个选项显示不同的文本行。我将如何修改此示例中的代码以使其工作？

I know this will likely turn out to be a large project, so don't worry about typing out everything for me if you can just give me a sample of what I have to do to modify the code so that it'll affect more than just one option. As you can probably guess by the size of this post, I am quite comfortable myself with writing to great lengths.

我知道这可能会成为一个大项目，所以不要担心为我输入所有内容，如果你能给我一个我必须做什么来修改代码的示例，以便它会影响更多只有一种选择。正如您可能从这篇文章的篇幅所猜到的那样，我对写得很长很满意。

Any help would be much appreciated.

任何帮助将非常感激。

Thanks in advance.

提前致谢。

采纳答案by Matt

One way or another, you've already ended up with what's probably the easiest HTML markup to use for the job:

以一种或另一种方式，您已经结束了可能是最容易用于这项工作的 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>

and then one <element>container for each possibility of <option>.

然后<element>为 的每种可能性设置一个容器<option>。

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

... etc etc...

……等等等等……

I'd use this same layout for everything that depends on which <option>is selected; the unique-line-of-text you want, the other-select-box, etc etc. I'd wrap each one in a container element, so you can easily target all the elements as one.

对于取决于<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>

Now whack a identifier to each of the <div>'s we've got, so when the "Airman" is selected, we know which <div>'s are the Airmans (so we know to show those ones!)

现在为<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>

And add the same identifier to the <options>'s of the <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>

Now we've got this markup, applying the JavaScript for the hiding/showing is so easy!

现在我们有了这个标记，应用 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
});

Done; checkout an example: http://jsfiddle.net/3UWk2/1/

完毕; 结帐示例：http: //jsfiddle.net/3UWk2/1/

An update for your comment

您的评论的更新

The reason your attempt to change the code like you did didn't work is because we've currently got no event handler bound to the 2nd level <select>boxes; only to <select id="rank">

您尝试更改代码的尝试没有成功的原因是因为我们目前没有绑定到第二级<select>框的事件处理程序；只为<select id="rank">

You need to basically repeat everything we've just done for the first level nav, for the second level nav. Instead of using an #idselector for the <select>, use a .class; because we've got more than one <select>element to target, and #id's have to be unique:

您需要基本上重复我们刚刚为第一级导航和第二级导航所做的一切。使用;而不是为 使用#id选择器。因为我们要定位的元素不止一个，而且's 必须是唯一的：<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

We've also had to change the name of the div.container, to stop the <select>boxes hiding each others elements.

我们还必须更改 的名称div.container，以阻止<select>盒子隐藏彼此的元素。

Check out an updated example here: http://jsfiddle.net/3UWk2/3/

在此处查看更新的示例：http: //jsfiddle.net/3UWk2/3/

回答by Joseph Marikle

Wow that's a lot of code... but actually it was really easy to do with jQuery (if that's an option). See my example.

哇，这是很多代码……但实际上用 jQuery 很容易做到（如果这是一个选项）。看我的例子。

First thing you need to do is remove the spaces in the id's. That's generally bad. Secondly, you just show/hide based off of those values in the select list passing them as id's.

您需要做的第一件事是删除 id 中的空格。这通常很糟糕。其次，您只需根据将它们作为 id 传递的选择列表中的这些值来显示/隐藏。

The jQuery (don't forget to include the jQuery link, though):

jQuery（不过不要忘记包含 jQuery 链接）：

$("#Rank").change(function(){
   correspondingID = $(this).find(":selected").val()
   $(".style-sub-1").hide();
   $("#" + correspondingID).show();
})

回答by mkk

My solution and advice would be to use AJAX. If you have a lot of options and for each a lot of other options, there is no point in loading them all instantly. The idea is to send an AJAX request and update the second select with proper options. You can also store proper text for each option in the database.. in this way, you have everything you want and you do not force user to download unnecessary selects

我的解决方案和建议是使用 AJAX。如果您有很多选项，并且每个选项都有很多其他选项，那么立即加载它们是没有意义的。这个想法是发送一个 AJAX 请求并使用适当的选项更新第二个选择。您还可以为数据库中的每个选项存储适当的文本.. 这样，您就拥有了您想要的一切，并且不会强迫用户下载不必要的选择

回答by Deshal Kh

include html code first

首先包含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>

after include js script

包含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>

It will sure work.

它肯定会起作用。

相关推荐

JavaScript - 获取 URL 路径的一部分

JavaScript - 获取 URL 路径的一部分

Javascript - 如何从 location.href 中删除域

Javascript - 如何从 location.href 中删除域

JavaScript 对象何时销毁？

JavaScript 对象何时销毁？

Javascript jQuery 事件冒泡

Javascript jQuery 事件冒泡

相关推荐
最近更新
标签