使用 jQuery Select2 清除下拉列表

问题描述 投票:0回答:18
javascript jquery jquery-select2
18个回答
79
投票

这对我有用:

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

当您以这种方式清除它时,它也可以与 jQuery 验证一起使用。

-- 编辑2013-04-09

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

$remote.select2('data', null)

47
投票

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

32
投票

这是正确的,select2将清除所选值并返回占位符。

$remote.select2('data', null)

29
投票

对于 select2 版本 4,可以轻松使用这个:

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

使用ajax调用填充select元素后,您可能需要在成功部分添加这行代码来更新内容:

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

18
投票

使用 select2 版本 4,您可以使用这个简短的符号:

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

这会在创建时将带有 null id 和文本的 json 数组传递给 select2,但首先使用

.html('')
清空之前存储的结果。


9
投票

你应该使用这个:

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

7
投票

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

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

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


6
投票

提出的方法@Lelio Faieta对我有用,但因为我使用bootstrap主题,它删除了select2的所有引导设置。所以我使用了以下代码:

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

6
投票

我有点晚了,但这就是上一个版本(4.0.3)中的功能:

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

3
投票

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

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

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


1
投票

我找到了我在另一个问题中寻找的答案(对user780178的赞美):

重置 select2 值并显示占位符

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

1
投票

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

希望有帮助。


1
投票

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


1
投票

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

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

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

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


0
投票

因为它们都不适合我(select2 4.0.3),所以采用了标准选择方式。

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

0
投票

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

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

0
投票

我就是这样做的:

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

0
投票

2024 年底,显然,唯一可以让我在不干扰其他事件的情况下以程序方式清除 Select2(版本 4.0.13)选项的解决方案是隐藏在 Select2 文档中用于清除选择选项的解决方案

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

© www.soinside.com 2019 - 2024. All rights reserved.