jQuery UI "CHOSEN" 插件：删除 select 列表上的选项不起作用

Question

我有一个服务器端生成的选项列表，如下所示，

<select id="chosen">
    <option value="1">select 1</option>
    <option value="2">select 1</option>
    <option value="3">select 1</option>
    <option value="4">select 1</option>
    <option value="5">select 1</option>
</select>

基于选项 selected，数据将从服务器中提取并附加到 table（行）

我想要实现的是，当我 select 选项列表中的项目（使用 onChange）时，我想从列表中删除 selected 项目（这样我就可以不要错误地重复 select 相同的项目）

我编译了下面的onChange脚本

    $("#chosen").change(function() {

        var data = "";
        var val = $("#chosen option:selected").val();           

        $.ajax({
            type:"GET",
            url : "pull_cust_inv.php",
            data : "invId="+$( "#chosen option:selected" ).val(),
            async: false,
            success : function(data) {
                $("#inv_list").append(data);
                //$("#chosen option:selected").remove();
            },
            error: function() {

                alert('Error occured');
            }
        });

        // REMOVE SELECTED OPTION
        $("#chosen option[value="+val+"]").remove();
    });

但是，由于某些奇怪的原因，该选项仍然出现在列表中（不会自行删除），但是当我第二次 select 它时，它没有得到 selected。

有人可以告诉我我的代码有什么问题吗？

Answer 1

您的遗漏 '' 删除

尝试替换

$("#chosen option[value="+val+"]").remove();

和

$("#chosen option[value='"+val+"']").remove();

Answer 2

我自己想出了答案。我正在为 select 下拉列表使用 "chosen" jquery 插件，因此传统方法（如下）将不起作用

$("#chosen option[value="+val+"]").remove();

解决方法 如果有人碰巧使用了我使用 "chosen"（jquery 插件）实现的技术，删除 selected 选项的正确方法是编写以下行。

$("#chosen option[value="+val+"]").remove();
$("#chosen").trigger("chosen:updated");

意思是，一旦你的 "remove" 选项元素你将不得不触发 "chosen:updated" 方法。

这仅表示您正在使用所选的 Jquery UI 插件。

希望对某人有所帮助 :)

jQuery UI "CHOSEN" 插件：删除 select 列表上的选项不起作用

jQuery UI "CHOSEN" Plugin: remove option on select list don't work

jquery

jquery-ui

select-options