使用 jQuery Select2 清除下拉列表

IT技术 javascript jquery jquery-select2
2021-02-20 18:17:50

我正在尝试使用出色的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,设置valtext并选择二的具体data功能。似乎无法让这个人清楚并以类似单选按钮的方式工作。有人有建议吗?

6个回答

这对我有用:

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

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

-- 编辑 2013-04-09

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

$remote.select2('data', null)
虽然这会清除选择,但我想再次显示占位符。
2021-04-24 18:17:50
不适合我。虽然我选择了十字按钮,但没有出现allowClear: true
2021-04-24 18:17:50
@SimonHürlimann 这会很好。我将占位符文本存储在内存中,然后使用此解决方案设置文本。您可能还想将 'select2-default' 类添加到 'select2-choice' 元素以获得正确的样式。
2021-05-11 18:17:50
@soham.m17 清除按钮仅在您再次选择一个值后才会出现。@ Aktee 很棒的解决方案,使用常规的 select2、multiple 和 ajax 源多选进行了测试,它在所有这些模式下都能正常工作,甚至占位符被放回原处。所有这些都用 Select2 3.3.2 测试过
2021-05-13 18:17:50

在 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); 重置;
2021-04-20 18:17:50
在其他回复中尝试了许多其他解决方案,只有您在 4.0.6-rc.0 版上对我有用
2021-04-25 18:17:50
谢谢老兄,你救了我的命。我为这个问题浪费了很多时间。
2021-05-07 18:17:50
这是您在没有火灾更改事件的情况下清理您的选择的唯一方法。
2021-05-11 18:17:50

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

$remote.select2('data', null)
同样,4.0+ 打破了很多东西!比如这个!!
2021-05-12 18:17:50

对于 select2 版本 4,请轻松使用:

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

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

  success: function(data, textStatus, jqXHR){
  $('#remote').change();
                } 
这是使用 jQuery函数删除所有子对象,这可能会产生意想不到的后果。
2021-04-16 18:17:50
请解释更多,什么后果?每次我使用它时,这都对我有用。
2021-04-29 18:17:50
它在一定程度上确实有效,但它会从您选择的 DOM 元素中删除所有子元素。Select2 依赖于它构建的特定 DOM 元素来为您提供额外的功能/行为。所以只是警告这不是 Select2 重置机制,而是在 Select2 初始化元素后操作 DOM,因此它可能导致功能丢失。我发现这个问题@最佳答案stackoverflow.com/questions/17957040/...
2021-05-03 18:17:50

使用 select2 版本 4,您可以使用这个简短的表示法:

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

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

与 select2 4.0.2 完美配合。
2021-05-03 18:17:50
我不知道,但这行得通 $('#id').select2('val', 'placeholder') 谢谢
2021-05-04 18:17:50
@LelioFaieta 不,我只是从服务器获取值并在 html 中有一个占位符
2021-05-11 18:17:50
@AbdulHameed 你的 html 中有一个空的 <option> 吗?
2021-05-14 18:17:50
这是完美的工作。在 select2 版本 4 中, $remote.select2('data', null) 不起作用。
2021-05-15 18:17:50