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

How to get the last value selected from dropdown and disable it using jquery

本文关键字：最后一个 jquery 选择 何获取 获取 下拉列表      更新时间：2023-09-26

>我有两个下拉列表，我想禁用从下拉列表中选择的最后一个值，并在其他下拉列表中启用上一个值。

假设我有两个下拉列表，如下所示：

<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小提琴

任何帮助，不胜感激。

可以尝试如下操作

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

您可以存储从第一个框中选择的最后一个项目的值，然后循环访问第二个框并将这些值与存储的值进行比较，禁用所有匹配的值。

相关文章：