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

Question

我正在尝试使用 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 元素添加边框？

Answer 1

你必须在更改处理程序中处理它

$('#select').on('change', function(){
  if ($('#select :selected').text() == ""){
    $('#select').addClass("alert");  
  } 
});

Answer 2

这是一个工作示例。

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

https://jsfiddle.net/WordyTheByrd/f772n4je/

Answer 3

如果我没听错，这里是工作代码：

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;
}

JS

$('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是您的目标，您可以将代码更改为以下，然后您提到的问题（评论部分）将得到解决：

$('#select').next().addClass("alert");

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

How to add border to Select2 element with jQuery?

javascript

jquery

select2