使用jQuery Select2清除下拉菜单

我试图以编程方式清除使用梦幻般的Select2库下拉。 下拉菜单使用Select2 query选项dynamic填充远程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', '')会引发下面的exception：

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

我试着设置attr ，设置val ， text和Select2特定的data函数。 似乎无法使这个人清醒，像一个单选button的方式工作。 任何人有build议？

Answer 1

这适用于我：

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

它也适用于jQueryvalidation，当你清除它的方式。

– 编辑2013-04-09

在写这个回应的时候，这是唯一的方法。 随着最近的补丁，一个适当的，更好的方式现在可用。

 $remote.select2('data', null) 

Answer 2

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

 $remote.select2('data', null) 

Answer 3

在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 4

使用select2版本4，您可以使用这个简短的表示法：

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

这将一个带有空id和文本的json数组传递给创build时的select2，但首先用.html('')清空以前存储的结果。

Answer 5

对于select2版本4，轻松使用这个：

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

使用ajax调用填充select元素后，您可能需要在成功部分中的这一行代码来更新内容：

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

Answer 6

你应该使用这个：

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

Answer 7

这两个都为我清除下拉菜单：

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

但重要的是：值不会被重置，.val（）将返回第一个选项，即使它没有被选中。 我正在使用Select2 3.5.3

Answer 8

提出的方法@Lelio Faieta正在为我工​​作，但因为我使用引导主题 ，它将删除select2的所有引导设置。 所以我使用了下面的代码：

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

Answer 9

我有点晚了，但这是最新版本（4.0.3）的工作：

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

Answer 10

我find了答案（赞美到user780178 ）我正在寻找在这个其他问题：

重置select2值并显示placeholdler

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

Answer 11

因为他们都没有为我工作（select2 4.0.3）是去标准select的方式。

 for(var i = selectbox.options.length - 1 ; i >= 0 ; i--) selectbox.remove(i); 

Answer 12

从> 4.0为了真正清理select2你需要做到以下几点：

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

请注意，我们根据最初的问题selectselect2。 在你的情况下，你可能会以不同的方式selectselect2。

希望能帮助到你。