jQuery 如何彻底清理select2控件？

How to clean completely select2 control?

提问by harrison4

I'm working with the awesome select2 control.

我正在使用很棒的select2 控件。

I'm trying to clean and disable the select2 with the content too so I do this:

我也在尝试使用内容清理和禁用 select2，所以我这样做：

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

Ok, it works, but if i had a value selected all the items are removed, the control is disabled, but the selected value is still displayed. I want to clear all content so the placeholder would be showed. Here is a example I did where you can see the issue: http://jsfiddle.net/BSEXM/

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

HTML:

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>

Code:

代码：

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

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

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

CSS:

CSS：

#sel {
    margin: 20px;
}

Do you have any idea or advice to this?

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

采纳答案by Fernando Trindade

Why all this trouble???

为什么这么麻烦？？？

use:

用：

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

回答by Paulo Araujo

Whenever you alter or change a value in select2try to use the trigger ("change"):

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

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

回答by Sarath Kumar

Try this from official select2 documentations.

从官方 select2 文档中尝试此操作。

version 4

版本4

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

For version 3.5.3

对于版本3.5.3

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

回答by Jeff Sieffert

I'm using Select2 v4.0 (4.0.6-rc.0)

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

Using the following clears all of the values in the dropdown field:

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

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

Doing this removes them entirely and they cannot be re-selected until the page refreshes.

这样做会完全删除它们，并且在页面刷新之前无法重新选择它们。

If all you want to do is remove the selection, do the following:

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

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

The currently selected options are cleared and the user will be able to re-select their intended options.

当前选择的选项被清除，用户将能够重新选择他们想要的选项。

回答by Thomas Decaux

To clean completely a select2(>= v4) component:

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

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

• val(null) -> remove selectform data
• empty -> remove selectoptions
• select2(destroy) -> remove select2plugin

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

Then you can create a new select2component with the same select HTML node if you want.

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

回答by Tigran Vardanyan

As answered Sarath Kumar:

正如萨拉斯·库马尔 (Sarath Kumar) 所回答的：

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

Reference from the official documentation, here is the link:

参考官方文档，链接如下：

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

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

回答by PSL

Try this:- http://jsfiddle.net/GqbSN/

试试这个：- 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");
    });
});

Note

笔记

$('#s2id_sel > a > span').text($(sel).data('placeholder')); What i understand looking at this plugin is the markup it creates from the select that we provide it generates id as #s2id_ + "yourselectelementid". So this would be a better way to use it in case you have multiple select controls and you want to disable only the some or one of them.

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

If you want to clear the select contents:- http://jsfiddle.net/G7TXj/

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

回答by gokhan dural?

My select2 in first option to "all". This option clears the other options and the first option is selected

我在第一个选项中的 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);

    }

回答by Nidhin Joseph

As per the doc here, you need to use the code as below

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

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

回答by Omid Ziyaee

try using this:

尝试使用这个：

$('#sel').html('').select2();