Question

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

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

任何人都已经解决了这个问题？

由于海梅

Answer 1

最后我发现它是Select2 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

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

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

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

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

将进入浏览器的控制台：

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

您使用{em> select2 隐藏了使用<select>和<option>元素创建的真实下拉列表。并创造了新的。

在新创建的下拉列表中，自动创建用户看到的字段（不显示下拉列表）。每次选择新选项时， select2 将使用新选项更改上一个字段。

单击X图标时，它也会删除主要字段。并使用占位符参数创建新字段。

Answer 3

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

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