選擇備選方案

Question

之前對不起我的英語不好。我描述我的問題，因此很短。

我的第一選擇列表點擊「黃金」，在列表3「Legierung」（999er，999er，999er ......）

我點擊的「西爾伯第一選擇列表」列表3 「Legierung」 成爲其他詞（333er，666er .....）

所以第三個列表是依賴於第一選擇。

有誰知道我該怎麼做？

謝謝。

http://jsfiddle.net/HvmyK/

<div class=" goldrechner"> 

     <div id="calculator"> 
      <form name=" goldrechner-form" class=" goldrechner-form"> 
      <input name="pt" value="1650" id="pt" type="hidden"> 
      <input name="pc" value="100" id="pc" type="hidden"> 
      <input name="ex" value="1.0048" id="ex" type="hidden"> 
      <div class=" goldrechner-header"> 
       <h2>Goldrechner</h2> 
      </div> 

      <ul> 
       <li> 
       <label class="desc" for="gr_em"> 
        <span>W&auml;hlen Sie Ihr Edelmetall aus</span> 
           <div> 
      <select id="gr_em" name="gr_em" tabindex="1"> 

<option selected="selected" value="gold">Gold</option> 
<option value="silber">Silber</option> 
<option value="platin">Platin</option> 
<option value="palladium">Palladium</option> 


    </select> 

      </div> 

      <li> 

      <label class="desc" for="gc-unit" > 
      <span>Gewichtseinheit</span> 

      <div> 
      <select id="gc-unit" name="gc-unit" tabindex="2"> 
<option selected="selected" value="gramm">Gramm</option> 

    </select> 

     </div> 

      <li class="colf"> 
      <label class="desc" for="gr_gewicht" > 
      <span>Gewicht</span> 
      <div> 
      <input id="gr_gewicht" name="gr_gewicht" class="small" tabindex="3" onkeyup="" type="text"> 

      <li class="colr"> 
      <label class="desc" for="gc-purity"> 
      <span>Legierung</span> 
          <div> 
      <select id="gc-purity" name="gc-purity" tabindex="4"> 

<option selected="selected" value=".75">999er</option> 
<option value=".917*.725">999er</option> 
<option value=".725*.8">999er</option> 
<option value=".725*.75">999er</option> 
<option value=".725*.585">999er</option> 
<option value=".725*.417">999er</option> 
<option value=".65*.375">999er</option> 
<option value=".65*.333">999er</option> 
        </select> 
      </div> 

      <li class="worthresult"> 
       <div class="result"> 
        <span class="num">0.00 Euro</span> 
       </div> 
      </li> 

Answer 1

下面是使用jQuery的解決方案：

所有它目前正在做這取決於在第一選擇要素選擇哪一選項是換出在第3個選擇元素的每個選項的文本，但您也可能希望對每個選項的值或ID進行更改，以便能夠分別識別每個選項的值。

工作小提琴：http://jsfiddle.net/HvmyK/2/

$(document).ready(function(){ 
//Monitor first select element for change in selected option 
$('select#gr_em').on('change', function(){ 
    console.log('changed'); 
    //Change 3rd select text if gold option selection 
    if($('option:selected', this).val() === 'gold'){ 
     $('select#gc-purity option:eq(0)').text('Gold - New Option 1'); 
     $('select#gc-purity option:eq(1)').text('Gold - New Option 2'); 
     $('select#gc-purity option:eq(2)').text('Gold - New Option 3'); 
     $('select#gc-purity option:eq(3)').text('Gold - New Option 4'); 
     $('select#gc-purity option:eq(4)').text('Gold - New Option 5'); 
     $('select#gc-purity option:eq(5)').text('Gold - New Option 6'); 
     $('select#gc-purity option:eq(6)').text('Gold - New Option 7'); 
    } 
    //Change 3rd select text if silber option selection 
    else if($('option:selected', this).val() === 'silber'){ 
     $('select#gc-purity option:eq(0)').text('Silber - New Option 1'); 
     $('select#gc-purity option:eq(1)').text('Silber - New Option 2'); 
     $('select#gc-purity option:eq(2)').text('Silber - New Option 3'); 
     $('select#gc-purity option:eq(3)').text('Silber - New Option 4'); 
     $('select#gc-purity option:eq(4)').text('Silber - New Option 5'); 
     $('select#gc-purity option:eq(5)').text('Silber - New Option 6'); 
     $('select#gc-purity option:eq(6)').text('Silber - New Option 7');   
    } 
    //Change 3rd select text if platin option selection 
    else if($('option:selected', this).val() === 'platin'){ 
     $('select#gc-purity option:eq(0)').text('Platin - New Option 1'); 
     $('select#gc-purity option:eq(1)').text('Platin - New Option 2'); 
     $('select#gc-purity option:eq(2)').text('Platin - New Option 3'); 
     $('select#gc-purity option:eq(3)').text('Platin - New Option 4'); 
     $('select#gc-purity option:eq(4)').text('Platin - New Option 5'); 
     $('select#gc-purity option:eq(5)').text('Platin - New Option 6'); 
     $('select#gc-purity option:eq(6)').text('Platin - New Option 7');   
    } 
    //Change 3rd select text if palladium option selection 
    else if($('option:selected', this).val() === 'palladium'){ 
     $('select#gc-purity option:eq(0)').text('Palladium - New Option 1'); 
     $('select#gc-purity option:eq(1)').text('Palladium - New Option 2'); 
     $('select#gc-purity option:eq(2)').text('Palladium - New Option 3'); 
     $('select#gc-purity option:eq(3)').text('Palladium - New Option 4'); 
     $('select#gc-purity option:eq(4)').text('Palladium - New Option 5'); 
     $('select#gc-purity option:eq(5)').text('Palladium - New Option 6'); 
     $('select#gc-purity option:eq(6)').text('Palladium - New Option 7');   
    } 
}); 
});