如何在 select2 下拉列表中显示星号（表示必填字段）？

Question

我有一个需要多选的表单。为此，我使用 Select2。 问题是：在这个表单中，我的所有字段都是必需的，当字段为空时，我会通过显示星号来通知我的用户。但是，Select2 完全忽略了在创建的 select 上有一个 required 属性这一事实。

所以我的问题是：如何在 select2 下拉菜单中显示星号图像？最好使用我用于其他输入的相同方法？

编辑：我已经处理了验证部分。我的问题纯粹是关于告知用户需要哪些字段。

示例表格

HTML

<input type="text" name="name" id="name" value="" placeholder="" maxlength="255" style="width: 300px" required="required"/>
<input type="text" name="label" id="label" value="" maxlength="8" style="width: 150px" required="required"/>
<?php
echo form_multiselect('client_types[]', $client_types, set_array('client_types', null), 'class="select2" style="width: 315px;" required="required"');
?>

CSS

input:required, textarea:required {
    background: #fff url(../images/red_asterisk.png) no-repeat 98% center;
}

.required_notification {
    color:#d45252;
    margin:5px 0 0 0;
    font-size: 12px;
    font-weight: bold;
}

input:required:valid, textarea:required:valid {
    background: #fff url(../images/valid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}
input:focus:invalid, textarea:focus:invalid {
    background: #fff url(../images/invalid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

Answer 1

你可以做三件事：

1) 在 Select 2 中创建一个规则并复制多个规则。该规则在该位置添加了小 x，因此您可以用星号代替您的。这很可能是三个选项中最不受欢迎的，所以我不会详细说明。

2) 您可以在您的 select2 容器上使用 CSS，例如：

select2-container:after {
  content: "*";
  display: block;
  position: absolute;
  right: 10px;
  top: 5px;
  color: red;
}
select2-container { position: relative; }

不是确切的代码，但你明白我的意思。如果这是针对特定字段的，您可能必须向该字段添加一个类并将其反映在您的 CSS 中，或者在您的选择周围添加一个包装器元素并将其定位。

3) 如果兼容性是一个问题，您可以随时使用 jQuery。

$(".select2-container").append("<span class="asterisk">*</span>");

再次使用您的选择器来获取您想要的确切元素并为星号跨度添加 CSS。

我对 select2 了解不够，所以如果 init 中有一个选项可以添加所需的指标，这将是你最好的，所以我会开始在那里研究，看看这是否是开箱即用的东西，如果不是，那么您可以尝试上述选项之一。

Answer 2

我有同样的问题。我发现了 2 个可接受的（对我而言）解决方案。

1. 使用 ajax 验证字段是否未设置\设置不正确。

2. 使用简单的 JavaScript 验证输入中是否有任何信息。

   可以在单击按钮（提交）或从输入更改焦点后完成。