1. 首頁
  2. 問答
  3. 根據以前的下拉選項顯示第二個下拉菜單

根據以前的下拉選項顯示第二個下拉菜單

2011-08-05 171 views
16

首先，我討厭提出已經處理的問題，但您應該知道我在本網站上找到的其他選項對我而言並不適用。根據以前的下拉選項顯示第二個下拉菜單

基本上，我想構建一個簡短的表單，其中有兩個下拉框。第一個總是顯示，第二個默認隱藏。當第一個下拉框中的某個選項被選中時，我想要顯示第二個下拉框。這是什麼，我的意思是一個完美的例子：

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

然而，與上面的例子，我有一個單獨的選項設置爲在第一個下拉框中選擇的每個選項的下拉框中顯示，和不只是其中一個選項。換句話說，在上面的例子中，如果你選擇「中國」，第二個下拉框會出現，但如果你選擇了其他任何東西，它將保持隱藏狀態。這不是我想要的。如果您選擇了「臺灣」，我想要顯示不同的下拉菜單，而如果您爲每個選項選擇了「德國」等，還需要顯示不同的下拉菜單。我試圖在每個選項中簡單地複製該示例中的JavaScript，並相應地更改名稱標籤，但那不起作用（當談到Javascript時，我是一個新手）。

所以我碰到這個例子中跑，而這正是諸如此類的事情，我在尋找：

http://jsfiddle.net/e9XvP/

然而，由於某種原因，該代碼似乎並沒有爲我工作。它根本沒有效果;無論選擇什麼內容，第二個下拉菜單都會保持隱藏狀態。我的下拉列表比上面例子中的更多，更冗長。下面是HTML我現在所擁有的：

下拉1

<div class="ccms_form_element cfdiv_custom" id="style_container_div"> 
<label>Choose Rank: </label><select size="1" id="Rank" class=" validate['required']" title="" type="select" name="Rank"> 
    <option value="">-Select Your Rank-</option> 
    <option value="Airman">Airman</option> 
    <option value="Airman First Class">Airman First Class</option> 
    <option value="Senior Airman">Senior Airman</option> 
    <option value="Staff Sergeant">Staff Sergeant</option> 
    <option value="Senior Master Sergeant">Senior Master Sergeant</option> 
</select><div class="clear"></div><div id="error-message-style"></div></div>

下拉2：

<div id="Airman" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)"> 
    <label>Which Job? </label> 
    <select id="Airman" name="Airman"> 
     <option value="">-Choose A Job-</option> 
     <option value="Basic Ore Miner - Level 1a">Basic Ore Miner - Level 1</option> 
     <option value="Basic Ore Miner - Level 2a">Basic Ore Miner - Level 2</option> 
     <option value="Basic Ore Miner - Level 3a">Basic Ore Miner - Level 3</option> 
     <option value="Basic Ore Miner - Level 4a">Basic Ore Miner - Level 4</option> 
     <option value="Basic Ore Miner - Level 5a">Basic Ore Miner - Level 5</option> 
     <option value="Basic Ore Miner - Level 6a">Basic Ore Miner - Level 6</option> 
     <option value="Basic Ore Miner - Level 7a">Basic Ore Miner - Level 7</option> 
     <option value="Plagioclase Miner - Level 1a">Plagioclase Miner - Level 1</option> 
     <option value="Plagioclase Miner - Level 2a">Plagioclase Miner - Level 2</option> 
     <option value="Plagioclase Miner - Level 3a">Plagioclase Miner - Level 3</option> 
     <option value="Plagioclase Miner - Level 4a">Plagioclase Miner - Level 4</option> 
     <option value="Plagioclase Miner - Level 5a">Plagioclase Miner - Level 5</option> 
     <option value="Plagioclase Miner - Level 6a">Plagioclase Miner - Level 6</option> 
     <option value="Plagioclase Miner - Level 7a">Plagioclase Miner - Level 7</option> 
     <option value="Omber Miner - Level 1a">Omber Miner - Level 1</option> 
     <option value="Omber Miner - Level 2a">Omber Miner - Level 2</option> 
     <option value="Omber Miner - Level 3a">Omber Miner - Level 3</option> 
     <option value="Omber Miner - Level 4a">Omber Miner - Level 4</option> 
     <option value="Omber Miner - Level 5a">Omber Miner - Level 5</option> 
     <option value="Omber Miner - Level 6a">Omber Miner - Level 6</option> 
     <option value="Omber Miner - Level 7a">Omber Miner - Level 7</option> 
     <option value="lvl-1 Mission Runner - Level 1a">lvl-1 Mission Runner - Level 1</option> 
     <option value="lvl-1 Mission Runner - Level 2a">lvl-1 Mission Runner - Level 2</option> 
     <option value="lvl-1 Mission Runner - Level 3a">lvl-1 Mission Runner - Level 3</option> 
     <option value="lvl-1 Mission Runner - Level 4a">lvl-1 Mission Runner - Level 4</option> 
     <option value="lvl-1 Mission Runner - Level 5a">lvl-1 Mission Runner - Level 5</option> 
     <option value="lvl-1 Mission Runner - Level 6a">lvl-1 Mission Runner - Level 6</option> 
     <option value="lvl-1 Mission Runner - Level 7a">lvl-1 Mission Runner - Level 7</option> 
     <option value="lvl-2 Mission Runner - Level 1a">lvl-2 Mission Runner - Level 1</option> 
     <option value="lvl-2 Mission Runner - Level 2a">lvl-2 Mission Runner - Level 2</option> 
     <option value="lvl-2 Mission Runner - Level 3a">lvl-2 Mission Runner - Level 3</option> 
     <option value="lvl-2 Mission Runner - Level 4a">lvl-2 Mission Runner - Level 4</option> 
     <option value="lvl-2 Mission Runner - Level 5a">lvl-2 Mission Runner - Level 5</option> 
     <option value="lvl-2 Mission Runner - Level 6a">lvl-2 Mission Runner - Level 6</option> 
     <option value="lvl-2 Mission Runner - Level 7a">lvl-2 Mission Runner - Level 7</option> 
     <option value="lvl-3 Mission Runner - Level 1a">lvl-3 Mission Runner - Level 1</option> 
     <option value="lvl-3 Mission Runner - Level 2a">lvl-3 Mission Runner - Level 2</option> 
     <option value="lvl-3 Mission Runner - Level 3a">lvl-3 Mission Runner - Level 3</option> 
     <option value="lvl-3 Mission Runner - Level 4a">lvl-3 Mission Runner - Level 4</option> 
     <option value="lvl-3 Mission Runner - Level 5a">lvl-3 Mission Runner - Level 5</option> 
     <option value="lvl-3 Mission Runner - Level 6a">lvl-3 Mission Runner - Level 6</option> 
     <option value="lvl-3 Mission Runner - Level 7a">lvl-3 Mission Runner - Level 7</option> 
     <option value="lvl-4 Mission Runner - Level 1a">lvl-4 Mission Runner - Level 1</option> 
     <option value="lvl-4 Mission Runner - Level 2a">lvl-4 Mission Runner - Level 2</option> 
     <option value="lvl-4 Mission Runner - Level 3a">lvl-4 Mission Runner - Level 3</option> 
     <option value="lvl-4 Mission Runner - Level 4a">lvl-4 Mission Runner - Level 4</option> 
     <option value="lvl-4 Mission Runner - Level 5a">lvl-4 Mission Runner - Level 5</option> 
     <option value="lvl-4 Mission Runner - Level 6a">lvl-4 Mission Runner - Level 6</option> 
     <option value="lvl-4 Mission Runner - Level 7a">lvl-4 Mission Runner - Level 7</option> 
    </select> 
</div> 
<div id="Airman First Class" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)"> 
    <label>Which Job? </label> 
    <select id="Airman First Class" name="Airman First Class"> 
    <option value="">-Choose A Job-</option> 
     <option value="Basic Ore Miner - Level 1b">Basic Ore Miner - Level 1</option> 
     <option value="Basic Ore Miner - Level 2b">Basic Ore Miner - Level 2</option> 
     <option value="Basic Ore Miner - Level 3b">Basic Ore Miner - Level 3</option> 
     <option value="Basic Ore Miner - Level 4b">Basic Ore Miner - Level 4</option> 
     <option value="Basic Ore Miner - Level 5b">Basic Ore Miner - Level 5</option> 
     <option value="Basic Ore Miner - Level 6b">Basic Ore Miner - Level 6</option> 
     <option value="Basic Ore Miner - Level 7b">Basic Ore Miner - Level 7</option> 
     <option value="Plagioclase Miner - Level 1b">Plagioclase Miner - Level 1</option> 
     <option value="Plagioclase Miner - Level 2b">Plagioclase Miner - Level 2</option> 
     <option value="Plagioclase Miner - Level 3b">Plagioclase Miner - Level 3</option> 
     <option value="Plagioclase Miner - Level 4b">Plagioclase Miner - Level 4</option> 
     <option value="Plagioclase Miner - Level 5b">Plagioclase Miner - Level 5</option> 
     <option value="Plagioclase Miner - Level 6b">Plagioclase Miner - Level 6</option> 
     <option value="Plagioclase Miner - Level 7b">Plagioclase Miner - Level 7</option> 
     <option value="Omber Miner - Level 1b">Omber Miner - Level 1</option> 
     <option value="Omber Miner - Level 2b">Omber Miner - Level 2</option> 
     <option value="Omber Miner - Level 3b">Omber Miner - Level 3</option> 
     <option value="Omber Miner - Level 4b">Omber Miner - Level 4</option> 
     <option value="Omber Miner - Level 5b">Omber Miner - Level 5</option> 
     <option value="Omber Miner - Level 6b">Omber Miner - Level 6</option> 
     <option value="Omber Miner - Level 7b">Omber Miner - Level 7</option> 
     <option value="lvl-1 Mission Runner - Level 1b">lvl-1 Mission Runner - Level 1</option> 
     <option value="lvl-1 Mission Runner - Level 2b">lvl-1 Mission Runner - Level 2</option> 
     <option value="lvl-1 Mission Runner - Level 3b">lvl-1 Mission Runner - Level 3</option> 
     <option value="lvl-1 Mission Runner - Level 4b">lvl-1 Mission Runner - Level 4</option> 
     <option value="lvl-1 Mission Runner - Level 5b">lvl-1 Mission Runner - Level 5</option> 
     <option value="lvl-1 Mission Runner - Level 6b">lvl-1 Mission Runner - Level 6</option> 
     <option value="lvl-1 Mission Runner - Level 7b">lvl-1 Mission Runner - Level 7</option> 
     <option value="lvl-2 Mission Runner - Level 1b">lvl-2 Mission Runner - Level 1</option> 
     <option value="lvl-2 Mission Runner - Level 2b">lvl-2 Mission Runner - Level 2</option> 
     <option value="lvl-2 Mission Runner - Level 3b">lvl-2 Mission Runner - Level 3</option> 
     <option value="lvl-2 Mission Runner - Level 4b">lvl-2 Mission Runner - Level 4</option> 
     <option value="lvl-2 Mission Runner - Level 5b">lvl-2 Mission Runner - Level 5</option> 
     <option value="lvl-2 Mission Runner - Level 6b">lvl-2 Mission Runner - Level 6</option> 
     <option value="lvl-2 Mission Runner - Level 7b">lvl-2 Mission Runner - Level 7</option> 
     <option value="lvl-3 Mission Runner - Level 1b">lvl-3 Mission Runner - Level 1</option> 
     <option value="lvl-3 Mission Runner - Level 2b">lvl-3 Mission Runner - Level 2</option> 
     <option value="lvl-3 Mission Runner - Level 3b">lvl-3 Mission Runner - Level 3</option> 
     <option value="lvl-3 Mission Runner - Level 4b">lvl-3 Mission Runner - Level 4</option> 
     <option value="lvl-3 Mission Runner - Level 5b">lvl-3 Mission Runner - Level 5</option> 
     <option value="lvl-3 Mission Runner - Level 6b">lvl-3 Mission Runner - Level 6</option> 
     <option value="lvl-3 Mission Runner - Level 7b">lvl-3 Mission Runner - Level 7</option> 
     <option value="lvl-4 Mission Runner - Level 1b">lvl-4 Mission Runner - Level 1</option> 
     <option value="lvl-4 Mission Runner - Level 2b">lvl-4 Mission Runner - Level 2</option> 
     <option value="lvl-4 Mission Runner - Level 3b">lvl-4 Mission Runner - Level 3</option> 
     <option value="lvl-4 Mission Runner - Level 4b">lvl-4 Mission Runner - Level 4</option> 
     <option value="lvl-4 Mission Runner - Level 5b">lvl-4 Mission Runner - Level 5</option> 
     <option value="lvl-4 Mission Runner - Level 6b">lvl-4 Mission Runner - Level 6</option> 
     <option value="lvl-4 Mission Runner - Level 7b">lvl-4 Mission Runner - Level 7</option> 
    </select> 
</div> 
<div id="Senior Airman" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)"> 
    <label>Which Job? </label> 
    <select id="Senior Airman" name="Senior Airman"> 
    <option value="">-Choose A Job-</option> 
     <option value="Basic Ore Miner - Level 1c">Basic Ore Miner - Level 1</option> 
     <option value="Basic Ore Miner - Level 2c">Basic Ore Miner - Level 2</option> 
     <option value="Basic Ore Miner - Level 3c">Basic Ore Miner - Level 3</option> 
     <option value="Basic Ore Miner - Level 4c">Basic Ore Miner - Level 4</option> 
     <option value="Basic Ore Miner - Level 5c">Basic Ore Miner - Level 5</option> 
     <option value="Basic Ore Miner - Level 6c">Basic Ore Miner - Level 6</option> 
     <option value="Basic Ore Miner - Level 7c">Basic Ore Miner - Level 7</option> 
     <option value="Plagioclase Miner - Level 1c">Plagioclase Miner - Level 1</option> 
     <option value="Plagioclase Miner - Level 2c">Plagioclase Miner - Level 2</option> 
     <option value="Plagioclase Miner - Level 3c">Plagioclase Miner - Level 3</option> 
     <option value="Plagioclase Miner - Level 4c">Plagioclase Miner - Level 4</option> 
     <option value="Plagioclase Miner - Level 5c">Plagioclase Miner - Level 5</option> 
     <option value="Plagioclase Miner - Level 6c">Plagioclase Miner - Level 6</option> 
     <option value="Plagioclase Miner - Level 7c">Plagioclase Miner - Level 7</option> 
     <option value="Omber Miner - Level 1c">Omber Miner - Level 1</option> 
     <option value="Omber Miner - Level 2c">Omber Miner - Level 2</option> 
     <option value="Omber Miner - Level 3c">Omber Miner - Level 3</option> 
     <option value="Omber Miner - Level 4c">Omber Miner - Level 4</option> 
     <option value="Omber Miner - Level 5c">Omber Miner - Level 5</option> 
     <option value="Omber Miner - Level 6c">Omber Miner - Level 6</option> 
     <option value="Omber Miner - Level 7c">Omber Miner - Level 7</option> 
     <option value="lvl-1 Mission Runner - Level 1c">lvl-1 Mission Runner - Level 1</option> 
     <option value="lvl-1 Mission Runner - Level 2c">lvl-1 Mission Runner - Level 2</option> 
     <option value="lvl-1 Mission Runner - Level 3c">lvl-1 Mission Runner - Level 3</option> 
     <option value="lvl-1 Mission Runner - Level 4c">lvl-1 Mission Runner - Level 4</option> 
     <option value="lvl-1 Mission Runner - Level 5c">lvl-1 Mission Runner - Level 5</option> 
     <option value="lvl-1 Mission Runner - Level 6c">lvl-1 Mission Runner - Level 6</option> 
     <option value="lvl-1 Mission Runner - Level 7c">lvl-1 Mission Runner - Level 7</option> 
     <option value="lvl-2 Mission Runner - Level 1c">lvl-2 Mission Runner - Level 1</option> 
     <option value="lvl-2 Mission Runner - Level 2c">lvl-2 Mission Runner - Level 2</option> 
     <option value="lvl-2 Mission Runner - Level 3c">lvl-2 Mission Runner - Level 3</option> 
     <option value="lvl-2 Mission Runner - Level 4c">lvl-2 Mission Runner - Level 4</option> 
     <option value="lvl-2 Mission Runner - Level 5c">lvl-2 Mission Runner - Level 5</option> 
     <option value="lvl-2 Mission Runner - Level 6c">lvl-2 Mission Runner - Level 6</option> 
     <option value="lvl-2 Mission Runner - Level 7c">lvl-2 Mission Runner - Level 7</option> 
     <option value="lvl-3 Mission Runner - Level 1c">lvl-3 Mission Runner - Level 1</option> 
     <option value="lvl-3 Mission Runner - Level 2c">lvl-3 Mission Runner - Level 2</option> 
     <option value="lvl-3 Mission Runner - Level 3c">lvl-3 Mission Runner - Level 3</option> 
     <option value="lvl-3 Mission Runner - Level 4c">lvl-3 Mission Runner - Level 4</option> 
     <option value="lvl-3 Mission Runner - Level 5c">lvl-3 Mission Runner - Level 5</option> 
     <option value="lvl-3 Mission Runner - Level 6c">lvl-3 Mission Runner - Level 6</option> 
     <option value="lvl-3 Mission Runner - Level 7c">lvl-3 Mission Runner - Level 7</option> 
     <option value="lvl-4 Mission Runner - Level 1c">lvl-4 Mission Runner - Level 1</option> 
     <option value="lvl-4 Mission Runner - Level 2c">lvl-4 Mission Runner - Level 2</option> 
     <option value="lvl-4 Mission Runner - Level 3c">lvl-4 Mission Runner - Level 3</option> 
     <option value="lvl-4 Mission Runner - Level 4c">lvl-4 Mission Runner - Level 4</option> 
     <option value="lvl-4 Mission Runner - Level 5c">lvl-4 Mission Runner - Level 5</option> 
     <option value="lvl-4 Mission Runner - Level 6c">lvl-4 Mission Runner - Level 6</option> 
     <option value="lvl-4 Mission Runner - Level 7c">lvl-4 Mission Runner - Level 7</option> 
    </select> 
</div> 
<div id="Staff Sergeant" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)"> 
    <label>Which Job? </label> 
    <select id="Staff Sergeant" name="Staff Sergeant"> 
    <option value="">-Choose A Job-</option> 
     <option value="Basic Ore Miner - Level 1d">Basic Ore Miner - Level 1</option> 
     <option value="Basic Ore Miner - Level 2d">Basic Ore Miner - Level 2</option> 
     <option value="Basic Ore Miner - Level 3d">Basic Ore Miner - Level 3</option> 
     <option value="Basic Ore Miner - Level 4d">Basic Ore Miner - Level 4</option> 
     <option value="Basic Ore Miner - Level 5d">Basic Ore Miner - Level 5</option> 
     <option value="Basic Ore Miner - Level 6d">Basic Ore Miner - Level 6</option> 
     <option value="Basic Ore Miner - Level 7d">Basic Ore Miner - Level 7</option> 
     <option value="Plagioclase Miner - Level 1d">Plagioclase Miner - Level 1</option> 
     <option value="Plagioclase Miner - Level 2d">Plagioclase Miner - Level 2</option> 
     <option value="Plagioclase Miner - Level 3d">Plagioclase Miner - Level 3</option> 
     <option value="Plagioclase Miner - Level 4d">Plagioclase Miner - Level 4</option> 
     <option value="Plagioclase Miner - Level 5d">Plagioclase Miner - Level 5</option> 
     <option value="Plagioclase Miner - Level 6d">Plagioclase Miner - Level 6</option> 
     <option value="Plagioclase Miner - Level 7d">Plagioclase Miner - Level 7</option> 
     <option value="Omber Miner - Level 1d">Omber Miner - Level 1</option> 
     <option value="Omber Miner - Level 2d">Omber Miner - Level 2</option> 
     <option value="Omber Miner - Level 3d">Omber Miner - Level 3</option> 
     <option value="Omber Miner - Level 4d">Omber Miner - Level 4</option> 
     <option value="Omber Miner - Level 5d">Omber Miner - Level 5</option> 
     <option value="Omber Miner - Level 6d">Omber Miner - Level 6</option> 
     <option value="Omber Miner - Level 7d">Omber Miner - Level 7</option> 
     <option value="lvl-1 Mission Runner - Level 1d">lvl-1 Mission Runner - Level 1</option> 
     <option value="lvl-1 Mission Runner - Level 2d">lvl-1 Mission Runner - Level 2</option> 
     <option value="lvl-1 Mission Runner - Level 3d">lvl-1 Mission Runner - Level 3</option> 
     <option value="lvl-1 Mission Runner - Level 4d">lvl-1 Mission Runner - Level 4</option> 
     <option value="lvl-1 Mission Runner - Level 5d">lvl-1 Mission Runner - Level 5</option> 
     <option value="lvl-1 Mission Runner - Level 6d">lvl-1 Mission Runner - Level 6</option> 
     <option value="lvl-1 Mission Runner - Level 7d">lvl-1 Mission Runner - Level 7</option> 
     <option value="lvl-2 Mission Runner - Level 1d">lvl-2 Mission Runner - Level 1</option> 
     <option value="lvl-2 Mission Runner - Level 2d">lvl-2 Mission Runner - Level 2</option> 
     <option value="lvl-2 Mission Runner - Level 3d">lvl-2 Mission Runner - Level 3</option> 
     <option value="lvl-2 Mission Runner - Level 4d">lvl-2 Mission Runner - Level 4</option> 
     <option value="lvl-2 Mission Runner - Level 5d">lvl-2 Mission Runner - Level 5</option> 
     <option value="lvl-2 Mission Runner - Level 6d">lvl-2 Mission Runner - Level 6</option> 
     <option value="lvl-2 Mission Runner - Level 7d">lvl-2 Mission Runner - Level 7</option> 
     <option value="lvl-3 Mission Runner - Level 1d">lvl-3 Mission Runner - Level 1</option> 
     <option value="lvl-3 Mission Runner - Level 2d">lvl-3 Mission Runner - Level 2</option> 
     <option value="lvl-3 Mission Runner - Level 3d">lvl-3 Mission Runner - Level 3</option> 
     <option value="lvl-3 Mission Runner - Level 4d">lvl-3 Mission Runner - Level 4</option> 
     <option value="lvl-3 Mission Runner - Level 5d">lvl-3 Mission Runner - Level 5</option> 
     <option value="lvl-3 Mission Runner - Level 6d">lvl-3 Mission Runner - Level 6</option> 
     <option value="lvl-3 Mission Runner - Level 7d">lvl-3 Mission Runner - Level 7</option> 
     <option value="lvl-4 Mission Runner - Level 1d">lvl-4 Mission Runner - Level 1</option> 
     <option value="lvl-4 Mission Runner - Level 2d">lvl-4 Mission Runner - Level 2</option> 
     <option value="lvl-4 Mission Runner - Level 3d">lvl-4 Mission Runner - Level 3</option> 
     <option value="lvl-4 Mission Runner - Level 4d">lvl-4 Mission Runner - Level 4</option> 
     <option value="lvl-4 Mission Runner - Level 5d">lvl-4 Mission Runner - Level 5</option> 
     <option value="lvl-4 Mission Runner - Level 6d">lvl-4 Mission Runner - Level 6</option> 
     <option value="lvl-4 Mission Runner - Level 7d">lvl-4 Mission Runner - Level 7</option> 
    </select> 
</div> 
<div id="Senior Master Sergeant" class="style-sub-1" style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)"> 
    <label>Which Job? </label> 
    <select id="Senior Master Sergeant" name="Senior Master Sergeant"> 
    <option value="">-Choose A Job-</option> 
     <option value="Basic Ore Miner - Level 1e">Basic Ore Miner - Level 1</option> 
     <option value="Basic Ore Miner - Level 2e">Basic Ore Miner - Level 2</option> 
     <option value="Basic Ore Miner - Level 3e">Basic Ore Miner - Level 3</option> 
     <option value="Basic Ore Miner - Level 4e">Basic Ore Miner - Level 4</option> 
     <option value="Basic Ore Miner - Level 5e">Basic Ore Miner - Level 5</option> 
     <option value="Basic Ore Miner - Level 6e">Basic Ore Miner - Level 6</option> 
     <option value="Basic Ore Miner - Level 7e">Basic Ore Miner - Level 7</option> 
     <option value="Plagioclase Miner - Level 1e">Plagioclase Miner - Level 1</option> 
     <option value="Plagioclase Miner - Level 2e">Plagioclase Miner - Level 2</option> 
     <option value="Plagioclase Miner - Level 3e">Plagioclase Miner - Level 3</option> 
     <option value="Plagioclase Miner - Level 4e">Plagioclase Miner - Level 4</option> 
     <option value="Plagioclase Miner - Level 5e">Plagioclase Miner - Level 5</option> 
     <option value="Plagioclase Miner - Level 6e">Plagioclase Miner - Level 6</option> 
     <option value="Plagioclase Miner - Level 7e">Plagioclase Miner - Level 7</option> 
     <option value="Omber Miner - Level 1e">Omber Miner - Level 1</option> 
     <option value="Omber Miner - Level 2e">Omber Miner - Level 2</option> 
     <option value="Omber Miner - Level 3e">Omber Miner - Level 3</option> 
     <option value="Omber Miner - Level 4e">Omber Miner - Level 4</option> 
     <option value="Omber Miner - Level 5e">Omber Miner - Level 5</option> 
     <option value="Omber Miner - Level 6e">Omber Miner - Level 6</option> 
     <option value="Omber Miner - Level 7e">Omber Miner - Level 7</option> 
     <option value="lvl-1 Mission Runner - Level 1e">lvl-1 Mission Runner - Level 1</option> 
     <option value="lvl-1 Mission Runner - Level 2e">lvl-1 Mission Runner - Level 2</option> 
     <option value="lvl-1 Mission Runner - Level 3e">lvl-1 Mission Runner - Level 3</option> 
     <option value="lvl-1 Mission Runner - Level 4e">lvl-1 Mission Runner - Level 4</option> 
     <option value="lvl-1 Mission Runner - Level 5e">lvl-1 Mission Runner - Level 5</option> 
     <option value="lvl-1 Mission Runner - Level 6e">lvl-1 Mission Runner - Level 6</option> 
     <option value="lvl-1 Mission Runner - Level 7e">lvl-1 Mission Runner - Level 7</option> 
     <option value="lvl-2 Mission Runner - Level 1e">lvl-2 Mission Runner - Level 1</option> 
     <option value="lvl-2 Mission Runner - Level 2e">lvl-2 Mission Runner - Level 2</option> 
     <option value="lvl-2 Mission Runner - Level 3e">lvl-2 Mission Runner - Level 3</option> 
     <option value="lvl-2 Mission Runner - Level 4e">lvl-2 Mission Runner - Level 4</option> 
     <option value="lvl-2 Mission Runner - Level 5e">lvl-2 Mission Runner - Level 5</option> 
     <option value="lvl-2 Mission Runner - Level 6e">lvl-2 Mission Runner - Level 6</option> 
     <option value="lvl-2 Mission Runner - Level 7e">lvl-2 Mission Runner - Level 7</option> 
     <option value="lvl-3 Mission Runner - Level 1e">lvl-3 Mission Runner - Level 1</option> 
     <option value="lvl-3 Mission Runner - Level 2e">lvl-3 Mission Runner - Level 2</option> 
     <option value="lvl-3 Mission Runner - Level 3e">lvl-3 Mission Runner - Level 3</option> 
     <option value="lvl-3 Mission Runner - Level 4e">lvl-3 Mission Runner - Level 4</option> 
     <option value="lvl-3 Mission Runner - Level 5e">lvl-3 Mission Runner - Level 5</option> 
     <option value="lvl-3 Mission Runner - Level 6e">lvl-3 Mission Runner - Level 6</option> 
     <option value="lvl-3 Mission Runner - Level 7e">lvl-3 Mission Runner - Level 7</option> 
     <option value="lvl-4 Mission Runner - Level 1e">lvl-4 Mission Runner - Level 1</option> 
     <option value="lvl-4 Mission Runner - Level 2e">lvl-4 Mission Runner - Level 2</option> 
     <option value="lvl-4 Mission Runner - Level 3e">lvl-4 Mission Runner - Level 3</option> 
     <option value="lvl-4 Mission Runner - Level 4e">lvl-4 Mission Runner - Level 4</option> 
     <option value="lvl-4 Mission Runner - Level 5e">lvl-4 Mission Runner - Level 5</option> 
     <option value="lvl-4 Mission Runner - Level 6e">lvl-4 Mission Runner - Level 6</option> 
     <option value="lvl-4 Mission Runner - Level 7e">lvl-4 Mission Runner - Level 7</option> 
    </select> 
</div> 
     <div class="clear"></div><div id="error-message-style-sub-1"></div></div>

正如我所說，無論是在上面的例子中的JavaScript代碼是爲我工作，並且我對JavaScript很新穎（並且不會在HTML中經歷太多），所以有什麼建議？

此外，一旦用戶在第二個下拉框中進行選擇，我需要一個獨特的文本行（即對其選擇唯一）來顯示在下拉框下方。下面是我發現了一個例子：

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

但是，同樣，不像這個的exaple我不想只是一個選項，以顯示文本;我希望顯示不同的文本行，以便選擇任何選項。我將如何去修改這個例子中的代碼來完成這個工作？

我知道這可能會變成一個大型項目，所以如果你能給我一個我必須做的修改代碼的樣本，會影響不止一個選項。正如你大概可以猜到這篇文章的大小，我自己寫了很長的篇幅讓我很舒服。

任何幫助將不勝感激。

在此先感謝。

來源

2011-08-05 Scott

+0

第二個例子真的應該工作......你有沒有爲jsfiddle啓用JavaScript？ – pyvi

+0

我的意思是，當我用上面我自己的HTML（甚至在jsfiddle中）使用JavaScript時，它不適用於我。當我簡單地運行給定的示例時，它確實工作正常。 – Scott

回答

14

這種或那種方式，你已經結束了什麼可能是最簡單的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>的是Airmans（所以我們知道，以顯示這些人！ ）

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

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

而同樣的標識符添加到<select id="rank">的<options>的：

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

現在，我們已經有了這個標記，運用JA vaScript爲隱藏/顯示是那麼容易！

$(document).ready(function() { 
    $('#Rank').bind('change', function() { 
     var elements = $('div.container').children().hide(); // hide all the elements 
     var value = $(this).val(); 

     if (value.length) { // if somethings' selected 
      elements.filter('.' + value).show(); // show the ones we want 
     } 
    }).trigger('change'); // Setup the initial states 
});

完成;籤一個例子：http://jsfiddle.net/3UWk2/1/

的評論

的原因，你試圖改變這樣的代碼，你根本沒有工作的最新情況是，因爲我們目前有綁定到第2級<select>盒沒有事件處理程序;只有<select id="rank">

您需要基本重複我們剛剛做了第一層次的資產淨值，對第二級資產淨值的一切。代替使用#id選擇爲<select>的，使用.class;因爲我們有一個以上的<select>元素爲目標，並#id的必須是唯一的：

$('.second-level-select').bind('change', function() { 
    var elements = $('div.second-level-container').children().hide(); // hide all the elements 
    var value = $(this).val(); 

    if (value.length) { // if somethings' selected 
     elements.filter('.' + value).show(); // show the ones we want 
    } 
}).trigger('change'); // Setup the initial states

我們也不得不改變div.container的名稱，停止<select>箱隱藏對方元素。

退房更新的例子在這裏：http://jsfiddle.net/3UWk2/3/

來源

2011-08-05 14:15:51 Matt

+0

非常感謝，Matt，這看起來完全像我需要的！ – Scott

+0

其實最後一件事，我想要在第二個下拉列表中爲每個選項顯示獨特的文本行，而不是第一個（即「Airman東西的文本行」，「高級Airman東西的文本行」等），而不是「Airman的文本行」），我只希望它在第二個下拉列表中的選項被選中後顯示。我嘗試將第一個容器中的類更改爲「airman-stuff」等，然後在「Airman Stuff」標籤中添加匹配值，但這並沒有成功。我是否需要將該容器命名爲其他內容，然後以某種方式編輯JavaScript？ – Scott

+1

@Scott：檢查我的答案的底部更新:) – Matt

3

我的解決方案和建議是使用AJAX。如果你有很多選項，並且每個選項都有很多其他選項，那麼立即加載它們是沒有意義的。這個想法是發送一個AJAX請求，並用適當的選項更新第二個選擇。您還可以將正確的文本爲數據庫中的每個選項。在這種方式，你有你想要的一切，你不強迫用戶下載不必要的選擇

來源

2011-08-05 14:13:06 mkk

+1

這也是一個更容易維護長期的解決方案。對於需要在網頁上工作的其他人來說，打開或關閉的網頁中的大量選擇可能會有點消化。 – Felan

+0

我對AJAX並不熟悉，但感謝您的回覆，我會仔細研究它，看看我能想出什麼。 – Scott

7

哇，這是一個很大的代碼......但實際上它是很容易做到與jQuery（如果這是一個選項）。看我的example。

您需要做的第一件事是刪除ID中的空格。這通常很糟糕。其次，您只需根據選擇列表中的值將其作爲ID進行顯示/隱藏。

jQuery的（不要忘了包括jQuery的鏈接，雖然）：

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

來源

2011-08-05 14:28:21

2

包括HTML代碼首先

<!-------first dropdown-----------> 
    <select name="make" id="elements"> 
     <option value="">-</option> 
     <option value="Satec" >Satec</option> 
     <option data-val='m2' value="Masibus" >Masibus</option> 
     <option data-val='m3' value="Pyrotech" >Pyrotech</option> 
     <option data-val='m4' value="Schneider" >Schneider</option> 

    </select> 

    <!---------second dropdown----------> 
    <select name="model" id="category"> 
     <option value="">-</option> 
     <option value="PM130" >PM130</option> 
     <option value="PM2160A" >PM2160A</option> 
     <option value="MFM101" >MFM101</option> 
     <option value="ABC" >ABC</option> 
    </select>

包括JS腳本後

<script> 
var category = document.getElementById('category'); 
document.getElementById('elements').onchange = function() { 
    var optionSelected = this.options[this.selectedIndex]; 
    if (optionSelected.textContent != '-') { 
    if (optionSelected.dataset.val === 'm2') { 
     category.value = 'PM2160A'; 
    } 
    else if (optionSelected.dataset.val === 'm3') { 
    category.value='MFM101'; 
} 
    else if (optionSelected.dataset.val === 'm4') { 
    category.value='ABC'; 
} 
    else { 
     category.value = 'PM130'; 
    } 
    } else { 
    category.value = ''; 
    } 
} 
</script>

它肯定會工作。

來源

2017-07-26 11:05:33

相關問題

 相關問題