Question

我正在使用令人敬畏的select2 control。

我正在尝试使用内容清理和禁用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

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

使用：

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

Answer 3

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

版本 4

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

版本 3.5.3

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

Answer 4

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

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

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

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

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

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

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

Answer 5

试试这个： - 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＆gt; a＆gt; span'）。text（$（sel）.data（'placeholder'））;我理解看这个插件的是它从我们提供的select创建的标记，它生成id为＃s2id_ +“yourselectelementid”。因此，如果您有多个选择控件并且只想禁用其中的一些或一个，这将是一种更好的使用方式。

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

Answer 6

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

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

    }

Answer 7

尝试使用：

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

Answer 8

要彻底清洁select2（> = v4）组件，

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

val（null）->删除select表单数据
空->删除select个选项
select2（destroy）->删除select2插件

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

Answer 9

根据文档here，您需要使用以下代码

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

如何完全清理select2控件？

9 个答案: