如何动态删除选定的选项

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

在options上使用.remove()

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();
    });
});

看这里

Answer 4

跟其他人说的一样。 这是在选择更改以模拟占位符之后删除ddl中的第一项

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

                           firstChild.remove();

                         }
                    }                     
              });