如何动态删除所选选项

Question

我试图找出用户选择后删除选项的Jquery。

<select id="field4" name="ProductRankingAtHome" style="width: 30%">
    <option value="">-Please Select-</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<select id="field5" name="ProductRankingAtWork" style="width: 30%">
    <option value="">-Please Select-</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<select id="field6" name="ProductRankingInCar" style="width: 30%">
    <option value="">-Please Select-</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

因此，当某人从“field4”中选择“1”后，“1”将不会出现在field5等中。

我试过了：

$ document.getElementById("field4").addEventListener("change", function (select) {
    if (this.value != "") {
        var select2 = document.getElementById("field5");
        for (var i = 0; i < select2.options.length; i++) {
            if (this.value == select2.options[i].value) {
                select2.options[i] = null;
                break;
            }
        }
    }
}, false);

Answer 1

在.remove()

上使用options

select2.remove(i); //i is the index of the option value you wish to remove

Answer 2

像这样 -

$("#field4").on('change',function(){
 if(this.value != ''){
   $("#field5 option[value='"+this.value+"']").remove();
 }
});

Answer 3

试试这个：

$("option").on("click",function(){
    var value=$(this).val();
    $("option[value='"+value+"']").each(function(){
        $(this).remove();
    });
});

查看Here

Answer 4

与其他人说的一致。这是在选定的更改后删除ddl中的第一个项目以模拟占位符

 $('#ddl').change( function () {
                    if ($(this).val() != '') {
                        var firstChild = $(this).children().eq(0);
                        if (firstChild.attr('value') == '') {

                           firstChild.remove();

                         }
                    }                     
              });