使用 jQuery Select2 清除下拉列表

Posted 2023-05-07

【中文标题】使用 jQuery Select2 清除下拉列表

【英文标题】：Clear dropdown using 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 问题不是通往幸福的道路。人们不得不做太多繁重的工作来帮助你。

【参考方案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，因此可能会导致功能丢失。我找到了这个问题的最佳答案@@***.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+ 破坏了很多东西！比如这个！！