jQuery UI“CHOSEN”插件：选择列表上的删除选项不起作用答案

【问题标题】：jQuery UI "CHOSEN" Plugin: remove option on select list don't workjQuery UI“CHOSEN”插件：选择列表上的删除选项不起作用
【发布时间】：2018-10-27 00:57:37
【问题描述】：

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

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

根据选择的选项，数据将从服务器中提取并附加到表（行）

我想要实现的是，当我从选项列表中选择项目时（使用 onChange），我想从列表中删除所选项目（这样我就不会再次错误地重复选择相同的项目）

我已经编译了以下 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();
    });

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

有人可以建议我的代码有什么问题吗？

【问题讨论】：

标签： jquery jquery-ui select-options

【解决方案1】：

您在删除时丢失的''

尝试更换

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

与

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

【讨论】：

我试过了，事实上我把它变成了一个字符串，比如 $("#chosen option[value='10002']").remove();但结果似乎是一样的......

【解决方案2】：

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

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

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

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

意思是，一旦你“删除”选项元素，你将不得不触发“chosen:updated”方法。

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

希望它可以帮助某人 :)

【讨论】：