如何完全清理select2控件？

Question

我正在使用令人敬畏的select2控件.

我正在尝试用内容清理和禁用select2,所以我这样做:

$("#select2id").empty();
$("#select2id").select2("disable");

好的,它可以工作,但如果我选择了一个值,所有项目都被删除,控件将被禁用,但仍会显示所选的值.我想清除所有内容,以便显示占位符.这是我做的一个例子,你可以看到这个问题:http://jsfiddle.net/BSEXM/

HTML:

<select id="sel" data-placeholder="This is my placeholder">
    <option></option>
    <option value="a">hello</option>
    <option value="b">all</option>
    <option value="c">stack</option>
    <option value="c">overflow</option>
</select>
<br>
<button id="pres">Disable and clear</button>
<button id="ena">Enable</button>

码:

$(document).ready(function () {
    $("#sel").select2();

    $("#pres").click(function () {
        $("#sel").empty();
        $("#sel").select2("disable");
    });

    $("#ena").click(function () {
        $("#sel").select2("enable");
    });
});

CSS:

#sel {
    margin: 20px;
}

你对此有什么想法或建议吗？

Answer 1

无论何时在select2中更改或更改值,请尝试使用触发器("更改")

$('#sel').empty().trigger("change");

Answer 2

从官方的select2文档中试试这个.

版本4

$("#sel").val(null).trigger("change");

对于3.5.3版

$("#sel").select2("val", "");

Answer 3

为什么这一切都麻烦???

使用:

 $('#sel').select2('data', null);

Answer 4

要完全清理select2(>= v4) 组件：

$('#sel').val(null).empty().select2('destroy')

• val(null) -> 删除select表单数据
• 空 -> 删除select选项
• select2(destroy) -> 删除select2插件

然后，您可以根据需要创建select2具有相同选择 HTML 节点的新组件。

Answer 5

我正在使用Select2 v4.0（4.0.6-rc.0）

使用以下命令清除下拉字段中的所有值：

$('#id_of_select2_select').empty();

这样做会完全删除它们，并且只有在页面刷新后才能重新选择它们。

如果您只想删除选择，请执行以下操作：

$('#id_of_select2_select').val(null).trigger('change');

当前选择的选项将被清除，用户将能够重新选择其预期的选项。