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选择选项：'one'，然后再从box_g1选择'two'（即来自同一个框）。那么在下一个下拉菜单中只应禁用最后一个值'two'。检查下面的小提琴：

JS Fiddle

感谢任何帮助。

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>

如何从下拉列表中选择最后一个值并使用jquery禁用它

2 个答案: