48

我正在使用很棒的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;
}

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

4

10 回答 10

91

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

$('#sel').empty().trigger("change");
于 2017-02-07T19:32:35.837 回答
33

从官方 select2 文档中试试这个。

第4版

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

对于版本3.5.3

$("#sel").select2("val", "");
于 2016-11-12T19:16:11.413 回答
30

为什么这一切的麻烦？？？

利用：

 $('#sel').select2('data', null);
于 2013-10-23T15:50:10.897 回答
11

要彻底清理select2(>= v4) 组件：

$('#sel').val(null).empty().select2('destroy')
  • val(null) -> 删除select表单数据
  • 空 -> 删除select选项
  • select2(destroy) -> 移除select2插件

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

于 2019-04-13T19:53:09.137 回答
9

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

使用以下内容清除下拉字段中的所有值：

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

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

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

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

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

于 2018-12-12T14:58:16.220 回答
1

试试这个：- 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/

于 2013-04-30T23:39:32.990 回答
1

正如 Sarath Kumar 所回答的：

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

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

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

于 2017-11-29T11:59:50.497 回答
0

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

    }
于 2017-06-15T09:30:49.887 回答
0

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

$('#mySelect2').val(null).trigger('change');
于 2020-02-20T03:18:30.063 回答
-1

尝试使用这个：

$('#sel').html('').select2();
于 2019-03-02T06:27:18.593 回答