如何使用jQuery向Select2元素添加边框？

polu 发表于 Dev

盒子

我正在尝试使用jQuery将边框添加到Select2，但是它不起作用。

JavaScript：

 $('#search').click(function () {
        if ($('#select :selected').text() == ""){
            $('#select').addClass("alert");  
        } 
});

CSS：

.alert
{   
    border: 2px solid red !important;
}

HTML：

<select style="width:300px" id="felevselect">
     <option disabled="disabled" selected="selected"></option>
</select>
<select style="width:120px" id="napselect">
     <option disabled="disabled" selected="selected"></option>
     <option value="1">Hétfő</option>
     <option value="2">Kedd</option>
     <option value="3">Szerda</option>
</select>
<select style="width:90px" id="select">
     <option disabled="disabled" selected="selected"></option>
     <option>8:00</option>
     <option>9:00</option>
     <option>10:00</option>
     <option>11:00</option>
</select>
<button id="search" type="button" class="btn btn-default">Keres</button>

如何仅向一个Select2元素添加边框？

梅赫迪·德加尼（Mehdi Dehghani）

如果我正确理解了您的要求，请使用以下工作代码：

的HTML

<select style="width: 100px;" id="my-select">
    <option value="1">Item1</option>
    <option value="2"></option>
    <option value="3">Item2</option>
</select>
<button>Click me!</button>

的CSS

.alert {
    border: 2px solid red !important;
}

$('select').select2();
$('button').on('click', function() {        
     if ($('#my-select :selected').text() == ""){
         $('.select2').addClass("alert");
     }

     // using following code you can toggle alert class
     // $('.select2').toggleClass("alert", $('#my-select :selected').text() == "");
 });

还提供了Codepen

如您所知，当使用时select2，此插件会隐藏该select元素并向您显示一些生成的HTML（而不是select），您可以使用浏览器的控制台检查生成的html

更新

如果#select目标是，您可以将代码更改为以下代码，那么您提到的问题（在评论部分）将得到修复：