javascript-使用jQuery Select2清除下拉列表

我正在尝试使用出色的Select2库以编程方式清除下拉列表。 使用Select2 attr选项,该下拉列表将动态填充有一个远程ajax调用。

HTML:

<input id="remote" type="hidden" data-placeholder="Choose Something" />

Javascript:

        var $remote = $('#remote');

        $remote.select2({
            allowClear: true,
            minimumInputLength: 2,
            query: function(options){
                $.ajax({
                    dataType: 'json',
                    url: myURL + options.term,
                    error: function(jqXHR, textStatus, errorThrown){
                        smoke.alert(textStatus + ": server returned error on parsing arguments starting with " + options.term);
                    },
                    success: function(data, textStatus, jqXHR){
                        var results = [];
                        for(var i = 0; i < data.length; ++i){
                            results.push({id: data[i].id, text: data[i].name});
                        }

                        options.callback({results: results, more: false});
                    }
                });
            }
        });

不幸的是,对attr的调用引发以下异常:

 Uncaught Error: cannot call val() if initSelection() is not defined

我尝试设置attr,设置valtext和Select2特定的data函数。 似乎无法使这个家伙清晰明了,并以类似单选按钮的方式工作。 有人有建议吗?

wheaties asked 2020-02-13T11:12:14Z
15个解决方案
74 votes

这对我有用:

 $remote.select2('data', {id: null, text: null})

当您以这种方式清除它时,它还可与jQuery validate一起使用。

-编辑2013-04-09

在撰写此回复时,这是唯一的方法。 使用最新的修补程序,现在可以使用一种正确且更好的方法。

$remote.select2('data', null)
Aktee answered 2020-02-13T11:12:40Z
35 votes

如果是Select2版本4+

它更改了语法,您需要这样编写:

// clear all option
$('#select_with_blank_data').html('').select2({data: [{id: '', text: ''}]});

// clear and add new option
$("#select_with_data").html('').select2({data: [
 {id: '', text: ''},
 {id: '1', text: 'Facebook'},
 {id: '2', text: 'Youtube'},
 {id: '3', text: 'Instagram'},
 {id: '4', text: 'Pinterest'}]});
Sruit A.Suk answered 2020-02-13T11:13:05Z
32 votes

这是正确的选择,select2将清除选定的值并显示占位符back。

$remote.select2('data', null)
Dewey answered 2020-02-13T11:13:25Z
16 votes

对于select2版本4,请轻松使用以下命令:

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

在用ajax调用填充select元素之后,您可能需要Success部分中的以下代码行来更新内容:

  success: function(data, textStatus, jqXHR){
  $('#remote').change();
                } 
Amin answered 2020-02-13T11:13:52Z
15 votes

使用select2版本4可以使用以下简短符号:

$('#remote').html('').select2({data: {id:null, text: null}});

这会在创建时将具有空ID和文本的json数组传递给select2,但首先,将.html('')清空之前存储的结果。

Lelio Faieta answered 2020-02-13T11:14:16Z
6 votes

建议的方法@Lelio Faieta对我有用,但是因为我使用引导程序主题,所以它删除了select2的所有引导程序设置。 所以我用下面的代码:

$("#remote option").remove();
Viktor Shatilo answered 2020-02-13T11:14:36Z
6 votes

您应该使用这个:

   $('#remote').val(null).trigger("change");
JackWang answered 2020-02-13T11:14:57Z
5 votes

我有点晚了,但这是最新版本(4.0.3)中的工作方式:

$('#select_id').val('').trigger('change');
Andres SK answered 2020-02-13T11:15:19Z
3 votes

这些对我来说都有助于清除下拉列表:

.select2('data', null)
.select2('val', null)

但重要的提示:value不会重置,.val()将返回第一个选项,即使未选择它也是如此。 我正在使用Select2 3.5.3

realplay answered 2020-02-13T11:15:45Z
1 votes

我找到了另一个问题的答案(对user780178的补充):

重置select2值并显示占位符

$("#customers_select").select2("val", "");
Aegix answered 2020-02-13T11:16:10Z
1 votes

为了真正清除select2,从> 4.0开始,您需要执行以下操作:

$remote.select2.val('');
$remote.select2.html('');
selectedValues = []; // if you have some variable where you store the values
$remote.select2.trigger("change");

请注意,我们根据初始问题选择select2。 在您的情况下,您很可能会以其他方式选择select2。

希望能帮助到你。

wazza answered 2020-02-13T11:16:39Z
1 votes

这解决了3.5.2版中的问题。

$remote.empty().append(new Option()).trigger('change');

根据此问题,您需要在select标签内显示一个空选项,以显示占位符。

Michał Szymański answered 2020-02-13T11:17:04Z
0 votes

由于它们都不对我有用(select2 4.0.3),因此成为了std select方法。

for(var i = selectbox.options.length - 1 ; i >= 0 ; i--)
    selectbox.remove(i);
ManuelSchneid3r answered 2020-02-13T11:17:24Z
0 votes

您可以使用它或进一步参考此[https://select2.org/programmatic-control/add-select-clear-items]

$('#mySelect2').val(null).trigger('change');
Rajdip Khavad answered 2020-02-13T11:17:44Z
-1 votes

这是我的方法:

$('#my_input').select2('destroy').val('').select2();
Sinan Eldem answered 2020-02-13T11:18:04Z
translate from https://stackoverflow.com:/questions/13240047/clear-dropdown-using-jquery-select2