如何獲取從下拉列表中選擇的最後一個值並使用jquery禁用它

Question

我有兩個下拉列表，我想禁用從下拉列表中選擇的最後一個值，並在其他下拉列表中啓用上一個值。

比方說，我有兩個下拉的，如下：

<select name="g1" id="box_g1"> 
    <option value="Select">Select</option> 
    <option value="one">one</option> 
    <option value="two">two</option> 
    <option value="three">three</option> 
</select> 

<select name="g2" id="box_g2"> 
<option value="Select">Select</option> 
    <option value="one">one</option> 
    <option value="two">two</option> 
    <option value="three">three</option> 
</select> 

如果我選擇的選項：從box_g1「一」，然後「二」從box_g1試（即在同一個方塊）。那麼只有最後一個值'two'應該在下一個下拉菜單中被禁用。檢查下面撥弄：

JS Fiddle

任何幫助表示讚賞。

Answer 1

可以嘗試像下面

<script type="text/javascript"> 
    var g1 = [], 
     g2 = []; 
    $('#box_g1 option').each(function(){g1.push($(this).val());}); 
    $('#box_g2 option').each(function(){g2.push($(this).val());}); 

    $('#box_g1').on('change', function(){ 
     var options = '', 
      selected = $('#box_g1').val(); 
     for(var i = 0; i < g2.length; i++){ 
      if(selected != g1[i] && selected != 'Select'){ 
       options += ('<option value="'+g2[i]+'">'+g2[i]+'</option>'); 
      } 
     } 
     $('#box_g2').empty().html(options); 
    }); 
</script> 

Answer 2

您可以存儲從第一個框中選擇的最後一個項目的值，然後遍歷第二個框並將這些值與存儲值進行比較，禁用所有匹配的項目。