select2 - 如何允许空值

Posted 2023-05-07

【中文标题】select2 - 如何允许空值

【英文标题】：select2 - how to allow a null value

【发布时间】：2017-12-06 23:49:23

【问题描述】：

在一个表单中有多个 select2 元素。 在一个特定的 select2 元素中，我设置了一些带有非空字符串“文本”和空“值”的选项。 提交表单的行为似乎是这样的：

如果 'value' 不为 null -> 'value' 是在 'submit' 操作中提交的项目 如果 'value' 为 null -> 'text' 是在 'submit' 操作中提交的项目

这不是我正在寻找的行为。 当“value”为空时，如何提交“value”？我只想提交null！我在 select2 文档中找不到类似的内容。

【问题讨论】：

您使用的是哪个版本的 Select2？正如我所看到的那样，该功能可能在 4.0 版本中发生了变化。

【参考方案1】：

要指定一个空值，请将 Select2 值设置为空，然后会出现占位符。

$('select').select2(
    placeholder: 'Your NULL value caption',
    allowClear: true   // Shows an X to allow the user to clear the value.
);

有一些方法（通过自定义数据适配器或以前的版本）来创建用户可以选择的空值条目。我知道，因为这是我以前做过的，但现在已经改变了。

Select2 4.0.3：参见：https://select2.org/selections

=====================

重要编辑：从版本 4.0.4（昨天）开始，有一个修复程序允许选择具有空白或 0 选项值的选项。 见：https://github.com/select2/select2/releases/tag/4.0.4

要启用此功能，您需要添加 NULL 值并删除“占位符”和“allowClear”选项。

如果您不删除“占位符”选项，它将隐藏您的“NULL”条目。

如果您离开“allowClear”，然后单击“X”将导致错误。

【参考方案2】：

可以通过 html 元素属性来完成（对于 select2）

<select ... data-allow-clear=true >

【参考方案3】：

我遇到了同样的问题，我使用的是静态文件，但使用 cdn 解决了这个问题

js cdn:

<script src%3D"https//cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>

css cdn

<link href%3D"https//cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css" rel="stylesheet" />

请在您的 css 和 js 中包含这些链接，然后使用

<script>
$(".your_class").select2(
placeholder: 'Your caption',
allowClear: true
)</script>

这样就可以了