使用jQuery Select2清除下拉列表

Question

我正在尝试使用梦幻般的Select2库以编程方式清除下拉列表.使用Select2 query选项通过远程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});
                    }
                });
            }
        });

不幸的是,调用$remove.select2('val', '')抛出以下异常:

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

我试过设置attr,设置val,text并选择二的具体data功能.似乎无法让这个家伙清楚地工作在一个单选按钮的方式.有人有建议吗？

Answer 1

这对我有用:

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

当你清除它时,它也适用于jQuery验证.

- 编辑2013-04-09

在撰写此回复时,这是唯一的方法.通过最近的补丁,现在可以使用正确且更好的方法.

$remote.select2('data', null)

Answer 2

如果是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'}]});

Answer 3

这是正确的,select2将清除所选值并显示占位符.

$remote.select2('data', null)

Answer 4

对于select2版本4,可以轻松使用:

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

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

  success: function(data, textStatus, jqXHR){
  $('#remote').change();
                } 

Answer 5

使用select2版本4,您可以使用以下简短表示法:

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

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

Answer 6

提议的方法@Lelio Faieta正在为我工​​作,但因为我使用bootstrap主题,它删除了select2的所有引导程序设置.所以我使用了以下代码:

$("#remote option").remove();

Answer 7

你应该使用这个:

   $('#remote').val(null).trigger("change");

Answer 8

这解决了我在 3.5.2 版中的问题。

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

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

Answer 9

我有点晚了,但这是在最后一个版本(4.0.3)中工作的:

$('#select_id').val('').trigger('change');