清除选择不在select2中工作

Question

我已经实现了select2小部件，版本4.它的工作原理，但x图标。它没有清除选择。

如果您看到此文档：https://select2.github.io/options.html，它说这实际上是一个问题，但文档不完整。

有人已经解决了这个问题吗？

感谢 海梅

Answer 1

最后我发现它是在选择二4.0.2的错误。

该溶液是这样的，在select2.js，线1760

这具有将被替换：

this.$element.val(this.placeholder.id).trigger('change'); 

this.trigger('toggle', {}); 

通过：

this.$element.val(this.placeholder.id).text(this.placeholder.text).trigger('change'); 

//this.trigger('toggle', {}); 

该解决方案还使得下拉不当选择被清除时出现。

Answer 2

不，这不是一个错误。 “X”图标需要占位符选项。 没有它，clearAllow选项不能使用。所以，正确的代码将是这样的：

$(".js-example-placeholder-single").select2({ 
    placeholder: "Put some text...", 
    allowClear : true 
}); 

顺便说一句，有一个名为调试无证选项。如果将它传递给select2（）方法，则会在控制台上打印找到的错误。例如代码如下：

$(".js-example-placeholder-single").select2({ 
    //placeholder: "Put some text...", 
    allowClear : true, 
    debug: true 
    }); 

能否拿到浏览器的控制台：

为什么allowClear需要占位符选项？

真正的下拉列表中，您使用<select>和<option>元素创建由选择2隐藏。并创建了一个新的。

在新建下拉列表中，用户看到的字段（无下拉列表）自动创建。每当您选择新选项时，select2将更改之前的字段。

当X图标被点击时，它也会删除主字段。并用占位符参数创建新的字段。

Answer 3

在我的情况下，即使设置了占位符选项，清除按钮也不起作用。我需要添加z-index属性：

.select2-container .select2-selection--single .select2-selection__rendered { 
    z-index:1; 
}