Question

我正在尝试使用精彩的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功能。似乎无法使这个家伙清楚地工作在一个单选按钮的方式。有人有建议吗？

Answer 1

这对我有用：

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

当你清除它时，它也适用于jQuery验证。

- 编辑2013-04-09

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

$remote.select2('data', null)

Answer 2

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

$remote.select2('data', null)

Answer 3

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

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

使用ajax调用填充select元素后，您可能需要在success部分中使用以下代码行来更新内容：

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

Answer 4

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

(i / (float) count) * 100)

这会在创建时将带有空id和文本的json数组传递给select2，但首先使用$('#remote').html('').select2({data: {id:null, text: null}});清空先前存储的结果。

Answer 5

你应该使用这个：

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

Answer 6

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

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

Answer 7

我有点迟了，但这是在最后一个版本（4.0.3）中的工作：

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

Answer 8

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

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

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

Answer 9

我在其他问题中找到了答案（赞美 user780178 ）：

Reset select2 value and show placeholdler

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

Answer 10

从＆gt; 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。

希望它有所帮助。

Answer 11

由于它们都不适用于我（select2 4.0.3），所以选择了std。

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

Answer 12

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

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

Answer 13

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

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

根据this issue，您需要在select标签内显示一个空白选项，以显示占位符。

Answer 14

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

Answer 15

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

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

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

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

Answer 16

我就是这样做的：

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

使用jQuery Select2清除下拉列表

16 个答案: