清除选择在select2中不起作用

Question

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

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

有谁已经解决了这个问题？

谢谢Jaime

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

不，这不是错误。“ X”图标需要占位符选项。没有它，将无法使用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需要占位符选项？

您使用<select>和创建的实际下拉列表<option>由select2隐藏。并创造了新的。

在新创建的下拉列表中，用户看到的字段（无下拉列表）是自动创建的。每次选择新选项时，select2都会用新的字段更改前一个字段。

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