使用jQuery Select2清除下拉菜单

我试图以编程方式清除使用奇妙Select2库的下拉菜单。下拉菜单使用Select2 query选项动态填充远程ajax呼叫。使用jQuery Select2清除下拉菜单

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和Select 2具体data功能。看起来似乎无法让这个人清醒，并像一个方式在一个单选按钮上工作。任何人都有建议？

来源

2012-11-05 wheaties

您是否尝试查找元素，然后执行'.remove（）'？ –

@EH_warch我不想删除Select2本身，只是清除已设置的值。 – wheaties

我不会删除整个select2，但元素。也许像'$（'。itemSelected'）。remove（）'？或者你的意思是喜欢做'$ remote.empty（）'？ –

这个工作对我来说：

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

它还与jQuery的原理验证，当你清楚这样的说法。

- 编辑2013年4月9日

在写这篇响应的时间，这是唯一的办法。有了最新的补丁程序，现在可以使用一种更好的方法。

$remote.select2('data', null)

来源

2012-11-22 20:24:28 Aktee

这比我使用的hacky解决方案好得多。 – wheaties

虽然这会清除选区，但我想再次显示占位符。 –

@SimonHürlimann这会很好。我将占位符文本存储在内存中，然后使用此解决方案设置文本。您可能还想将'select2-default'类添加到'select2-choice'元素以获得正确的样式。 –

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

$remote.select2('data', null)

来源

2013-02-16 19:16:15 Dewey

不工作在选择4.0+ – Waclock

再次，4.0+打破了很多东西！这个例子！ –

$ remote.select2.html（''）应该在4.0中做诡计 – wazza

在选择二版的情况下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'}]});

来源

2015-05-10 09:26:13

你是我的英雄！谢谢，这个固定版本4.0没有用select2（'data'，null）重置; –

@ SruitA.Suk不适用于4.0.0版。任何想法？ –

使用选择2版本4，你可以使用此短符号：

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

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

来源

2015-08-20 10:28:55

这是完美的工作。在select2版本4中，$ remote.select2（'data'，null）不起作用。 – ruvi

与select2 4.0.2完美兼容。 –

它工作，但不显示占位符 –

对于选择2 4版很容易地使用这样的：

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

与Ajax调用填充选择元素后，您可能需要这行代码中签部分更新内容：

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

来源

2015-11-16 07:19:29 Amin

这是使用jQuery [空]（https://api.jquery.com/empty/）函数删除所有子对象，这可能会导致意想不到的后果。 – Aegix

请详细解释一下，哪些后果？这对我每次使用它都有效。 – Amin

它在某种程度上可行，但会从您选择的DOM元素中删除所有子元素。 Select2依赖于它构建的特定DOM元素来为您提供额外的功能/行为。所以只是警告说这不是一个Select2机制来重置，而是你在Select2初始化元素之后操纵DOM，所以它可能会导致功能的丧失。我找到了这个问题的最佳答案@ http://stackoverflow.com/questions/17957040/reset-select2-value-and-show-placeholdler。 – Aegix

我找到了答案（恭维user780178）我在找另一个问题：

Reset select2 value and show placeholdler

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

来源

2015-12-21 21:58:21 Aegix

请让我知道如果我应该做一些不同的事情来链接不同的SO问题....新的这个:-) – Aegix

这些都为我清除下拉工作：

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

但重要提示：价值没有得到重置，.VAL（）将返回第一个选项，即使它没有选择。我正在使用Select2 3.5.3

来源

2016-01-22 00:15:07 realplay

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

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

来源

2016-06-16 15:33:55

这是唯一的工作！谢谢 – Chris

尝试了其他人，这一个为我工作。 –

你应该使用这一个：

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

来源

2016-08-05 08:08:28 JackWang

根据在调试模式下抛出的不推荐使用的消息，这是从现在开始的正确解决方案： “select2（”val“）'方法已被弃用，并且将在以后的Select2版本中被删除使用'$ element.val（） '而不是“ –

我有点晚了，但是这是什么工作，在过去的版本（4.0.3）：

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

来源

2016-08-17 14:31:10 andufo

是的，为我工作！ – awebartisan

因为他们都没有为我工作（select2 4.0.3）是去了std选择的方式。

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

来源

2017-05-19 08:09:57 ManuelSchneid3r

从> 4.0，才能真正净化你需要做以下的选择2：

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

请注意，我们选择基于初始问题选择2。在你的情况下，你很可能会以不同的方式选择select2。

希望它有帮助。

来源

2017-06-15 12:21:58 wazza

使用jQuery Select2清除下拉菜单

回答

相关问题