javascript - 使用 jQuery Select2 清除下拉列表

Question

我正在尝试使用出色的Select2库以编程方式清除下拉列表。下拉列表使用 Select2query选项动态填充远程 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和textSelect2 特定data功能。似乎无法让这个人清楚并以单选按钮的方式工作。有人有建议吗？

score 78 · Accepted Answer

这对我有用：

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

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

-- 编辑 2013-04-09

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

$remote.select2('data', null)

score 44 · Accepted Answer

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

score 32 · Accepted Answer

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

$remote.select2('data', null)

score 25 · Accepted Answer

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

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

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

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

score 18 · Accepted Answer

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

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

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

score 8 · Accepted Answer

8

你应该使用这个：

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

于 2016-08-05T08:08:28.430 回答

score 6 · Accepted Answer

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

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

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

score 6 · Accepted Answer

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

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

score 5 · Accepted Answer

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

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

score 3 · Accepted Answer

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

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

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

score 1 · Accepted Answer

1

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

于 2020-12-28T19:32:14.693 回答

score 1 · Accepted Answer

I found the answer (compliments to user780178) I was looking for in this other question:

Reset select2 value and show placeholdler

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

score 1 · Accepted Answer

从 >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 。

希望能帮助到你。

score 1 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

0

这就是我的做法：

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

于 2018-04-04T11:14:13.060 回答

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

由于它们都没有为我工作（select2 4.0.3）是std select方式。

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

javascript - 使用 jQuery Select2 清除下拉列表

17 回答 17

Related

Reference