如何從下拉列表中選擇最后一個值並使用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'兩個'（即從同一個盒子）。 那么在下一個下拉列表中僅應禁用最后一個值“二”。 檢查以下小提琴：

JS小提琴

任何幫助表示贊賞。

Answer 1

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

Answer 2

可以嘗試如下

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