Question

我正在使用现在工作正常的select2。我想验证它的值不能为空。我不想使用jQuery验证器插件，因为表单上还有其他字段以及用于验证表单的其他字段的代码是预先编写的，我只是将select2应用于每个下拉列表。我试过在网上解决方案，但每个答案都使用jquery验证器插件。

我的代码是

$('.select2-use').select2({
        placeholder: "Select",
        allowClear: true
    });

<select id="type" name="type" class="form-control select2-use">
    <option value="">select type</option>
    <option value="U">User</option>
    <option value="A">Admin</option>
</select>

我目前的验证是

if (type == '') {
   $("#type").closest("span[class='select2-selection--single']").css('border-color','#a94442'); //which is not working
   console.log($("#type").find('span.select2-selection--single'));
   flag++;
} else {
  $('.select2-selection--single').css('border-color','');
}

如何将select2 span的边框颜色更改为红色错误。

Answer 1

尝试使用以下代码：

if (type == '') {
   $("#type").next("span.select2-container").find("span[class='select2-selection--single']").css('border-color','#a94442'); 
   console.log("match found");
   flag++;
} else {
  $("#type").next("span.select2-container").find("span[class='select2-selection--single']").css('border-color','');
}

每当我们将正常dropdown转换为select2下拉列表时;然后这个插件创建自己的DOM结构并隐藏原始的dropdown。因此生成的DOM就位于原始dropdown旁边。处理其DOM;我们需要使用$.next()遍历DOM中的下一个，然后我们可以通过$.find()抓取它的任何子元素。希望它会对你有所帮助。

Answer 2

在.select2-choice上应用样式。

以下是最好的方法。

添加以下css类：

.select2-container .select2-choice {
        border: 1px solid transparent !important;
        box-shadow: none;
        border-radius: 0;
    }
    .select2-container .select2-choice.show-error {
        border: 1px solid #EC644B !important;
    }

出错时请执行此操作。

jQuery("#yourtargetselect2 .select2-choice").addClass("show-error");

使用您的代码

if (type == '') {
   $("#type").closest(".select2-choice").css('border-color','#a94442'); //which is not working
   flag++;
} else {
  $('.select2-choice').css('border-color','');
}

在select2中应用自定义验证

2 个答案: