php - 我如何在 select2 下拉列表中显示星号(以指示字段是必需的)？

Question

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

所以我的问题是:如何在 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 中反射(reflect)它，或者在您的选择和目标周围添加一个包装器元素。

3) 如果兼容性是个问题，你总是可以使用 jQuery。

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

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

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