如何完全清除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;
}

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

- mllamazares

---

标题有误导性，请为未来读者更改。 - ManuelSchneid3r

Answer 1

每当您在 select2 中更改或修改一个值时，请尝试使用触发器 ("change")：

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

- Paulo Araujo

---

在Select2 4.0.3版本中，使用empty()而不是value(null)对我很有用，谢谢！ - konrad_pe

了解，我会尽力进行翻译。FYI：这也会删除占位符。 - qwertzman

运行得非常顺利。 - Jivan Bhandari

Answer 2

请参考官方select2文档中的内容。

版本号为4

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

针对版本3.5.3

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

- Sarath Kumar

---

哦我的天啊，就是这个！以上的方法都没用，我猜这个解决方案是针对Select2 v4的。 - sr9yar

这对我没有起作用。看起来它改变的只是选择框的大小。现在它非常窄（只有一个字符宽）。 - jonlink

@jonlink请检查您的select2版本。 - Sarath Kumar

只是跟进一下。我再试了一次，没有编辑任何代码，它就可以工作了。很奇怪，但我会接受这个结果。而且，文档甚至说要这样做，所以这一定是某种误操作 :) - jonlink

Answer 3

为什么要这么麻烦？

用途：

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

- Fernando Trindade

---

这种方法已被弃用，将在Select2 4.1中移除。 - Sarath Kumar

完美地工作了！你是我的天使！ - Abadis

它不适用于新的select2实现。Sarath Kumar的答案现在是有效的。 - Patroklo

如果我只想保留所选选项并删除其余所有选项，我该怎么做？ - Coding world

Answer 4

要完全清除 select2（>= v4）组件：

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

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

然后，如果需要，您可以使用相同的 select HTML 节点创建一个新的 select2 组件。

- Thomas Decaux

Answer 5

我正在使用Select2 v4.0 (4.0.6-rc.0)

使用以下代码将清除下拉字段中的所有值：

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

这样做会完全删除它们，直到页面刷新后才能重新选择。

如果你只想取消选择，请按照以下步骤操作：

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

当前选择的选项已被清除，用户可以重新选择他们想要的选项。

- Jeff Sieffert

---

val(null).trigger('change') 是救我一命的方式... - Carlos Gómez

val(null).trigger('change') 是拯救我生命的方式... - Carlos Gómez

Answer 6

作为Sarath Kumar的回答：

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

这是官方文档的参考链接：

https://select2.org/programmatic-control/add-select-clear-items#clearing-selections

- Tigran Vardanyan

---

我不确定从这个重复的答案中获得了多少价值。 - TidyDev

刚刚在官方文档中添加了缺失的参考。感谢您的反馈。 - Tigran Vardanyan

Answer 7

尝试一下： http://jsfiddle.net/GqbSN/

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

    $("#pres").click(function () {
      $('#s2id_sel > a > span').text($(sel).data('placeholder')); 
        //$('.select2-container > a > span').text('This is my placeholder');
        $("#sel").select2("disable");;
       });

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

注意

$('#s2id_sel > a > span').text($(sel).data('placeholder')); 根据我对这个插件的理解，它从我们提供的选择器生成标记，将其生成的ID作为 #s2id_ +“yourselectelementid”。因此，如果您有多个选择控件，并且只想禁用其中一些或一个，则这将是更好的使用方式。

如果您想清除选择内容：- http://jsfiddle.net/G7TXj/

- PSL

---

它应该可以工作，除了你需要删除这一行 $("#sel").empty();。 - Sushanth --

我现在已经放置了两个版本.. 可能他指的是清除选择。谢谢你指出来.. :) - PSL

非常感谢你们两个！是的，我也想清除内容，如果我没有说清楚，对不起... - mllamazares

@Joëlle，请查看我的更新并确认它是否适用于你的情况。 - PSL

好的，就这样了！再次感谢。顺便问一下，您能否给我一个小例子，使用其ID同时删除三个select2？ - mllamazares

Answer 8

我测试了这段代码并得到了答案：

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

- Mohammad Koochaki

Answer 9

我的select2在第一个选项中选择“全部”。这个选项会清除其他选项，并选择第一个选项。

var $eventSelect = $("#storeList");
   $("#storeList").on("change", function (e) {
        if (e.added != undefined) {
            if (e.added.id == 0 && e.val.length>1) {
                   removeTags();
                $("#storeList").val('0').select2();

            }

        }

    });

  function removeTags(){
        $eventSelect.select2('data', null);

    }

- gokhan duralı

Answer 10

根据文档此处，您需要使用以下代码。

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

- Nidhin Joseph