使用 jQuery Select2 清除下拉列表答案

【问题标题】：Clear dropdown using jQuery Select2使用 jQuery Select2 清除下拉列表
【发布时间】：2012-10-25 18:10:48
【问题描述】：

我正在尝试使用出色的 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和Select2特定的data函数。似乎无法让这个人清楚并以单选按钮的方式工作。有人有建议吗？

【问题讨论】：

您是否尝试找到元素然后执行.remove()？
@EH_warch 我不想删除 Select2 本身，只是清除已设置的值。
建议不要删除整个 select2，而是删除元素。也许像$('.itemSelected').remove() 这样的东西？或者你的意思是喜欢$remote.empty()？
@EH_warch 将删除值本身，或仅删除显示的元素。这里有两个问题，一个是确保它看起来好像我们没有选择一个值，然后确保该值没有设置。我不确定执行您的建议是否不会导致库出现问题或解决问题。会吗？
不费吹灰之力地问 JS 问题不是通往幸福的道路。人们不得不做太多繁重的工作来帮助你。

标签： javascript jquery jquery-select2

【解决方案1】：

如果需要，此代码会删除所有结果以显示新列表：

$('#select2Elem').data('select2').$results.children().remove()

比如在省市列表中，当省份发生变化，我们点击城市输入时，仍然会显示旧城市列表，直到加载新列表。

使用我写的代码，可以在调用ajax之前删除旧列表

【讨论】：

【解决方案2】：

对于 Ajax，使用 $(".select2").val("").trigger("change")。这应该可以解决问题。

【讨论】：

欢迎来到 SO。尽管我们感谢您的回答，但如果它在其他答案之上提供额外的价值会更好。在这种情况下，您的答案不会提供额外的价值，因为 Rajdip Khavad 已经发布了该解决方案。如果之前的答案对您有帮助，那么您应该在获得足够声誉后投票。
不确定上面的评论，这对我很有帮助，也很清楚。

【解决方案3】：

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

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

根据this issue，您需要在选择标签内有一个空选项才能显示占位符。

【讨论】：

【解决方案4】：

我就是这样做的：

$('#my_input').select2('destroy').val('').select2();

【讨论】：

【解决方案5】：

你可以使用这个或进一步参考这个https://select2.org/programmatic-control/add-select-clear-items

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

【讨论】：

【解决方案6】：

从 >4.0 开始，为了真正清理 select2，您需要执行以下操作：

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

请注意，我们根据最初的问题选择 select2。在您的情况下，您很可能会以不同的方式选择 select2。

希望对你有帮助。

【讨论】：

【解决方案7】：

由于没有一个对我有用（select2 4.0.3），所以采用了标准选择方式。

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

【讨论】：

【解决方案8】：

我有点晚了，但这是最新版本 (4.0.3) 中的功能：

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

【讨论】：

【解决方案9】：

你应该使用这个：

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

【讨论】：

这是正确的解决方案，根据 deprecated message 在调试模式下抛出：“select2("val") 方法已被弃用，将在以后的 Select2 版本中删除。改用$element.val()”

【解决方案10】：

@Lelio Faieta 建议的方法对我有用，但因为我使用bootstrap theme，它会删除 select2 的所有引导设置。所以我使用了以下代码：

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

【讨论】：

【解决方案11】：

这些都可以帮助我清除下拉列表：

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

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

【讨论】：

【解决方案12】：

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

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

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

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

【讨论】：

这是使用 jQuery empty 函数删除所有子对象，这可能会产生意想不到的后果。
请多解释一下，会有哪些后果？这对我每次使用都有效。
它在一定程度上确实有效，但它会从您选择的 DOM 元素中删除所有子元素。 Select2 依赖于它构建的特定 DOM 元素来为您提供额外的功能/行为。所以只是警告这不是用于重置的 Select2 机制，而是在 Select2 初始化元素之后操作 DOM，因此可能会导致功能丢失。我找到了这个问题的最佳答案@@stackoverflow.com/questions/17957040/…。

【解决方案13】：

我在另一个问题中找到了答案（对 user780178 的赞美）：

Reset select2 value and show placeholdler

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

【讨论】：

如果我应该做一些不同的事情来链接不同的 SO 问题，请告诉我.... 新手:-)

【解决方案14】：

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

【讨论】：

你是我的英雄！谢谢，这个固定版本 4.0 没有用 select2('data', null); 重置；
这是您在不触发更改事件的情况下清理您的选择的唯一方法。
在其他回复中尝试了许多其他解决方案，只有您在 4.0.6-rc.0 版本上为我工作
谢谢老兄，你救了我的命。我为这个问题浪费了很多时间。

【解决方案15】：

使用 select2 版本 4，您可以使用以下短符号：

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

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

【讨论】：

这是完美的工作。在 select2 版本 4 中，$remote.select2('data', null) 不起作用。
与 select2 4.0.2 完美配合。
@AbdulHameed 你的 html 中有一个空的
@LelioFaieta 不，我只是从服务器获取值并在 html 中有一个占位符
我不知道，但这有效 $('#id').select2('val', 'placeholder') 谢谢

【解决方案16】：

这对我有用：

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

当您以这种方式清除它时，它也适用于 jQuery 验证。

-- 编辑 2013-04-09

在撰写此回复时，这是唯一的方法。使用最近的补丁，现在可以使用适当且更好的方法。

$remote.select2('data', null)

【讨论】：

虽然这会清除选择，但我想再次显示占位符。
@SimonHürlimann 这会很好。我将占位符文本存储在内存中，然后使用此解决方案设置文本。您可能还想将“select2-default”类添加到“select2-choice”元素以获得正确的样式。
对我不起作用。虽然我选择了allowClear: true，但十字按钮没有出现。
@soham.m17 只有在您再次选择一个值后才会出现清除按钮。 @Aktee 很棒的解决方案，使用常规 select2、multiple 和 ajax 源多选进行了测试，它在所有这些模式下都可以正常工作，即使占位符被放回。所有这些都使用 Select2 3.3.2 进行了测试

【解决方案17】：

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

$remote.select2('data', null)

【讨论】：

再一次，4.0+ 破坏了很多东西！比如这个！！