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

我正在尝试使用jQuery向Select2添加边框，但它不起作用

JavaScript:

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

CSS:

HTML:

赫特夫ő
基德
谢尔达
8:00
9:00
10:00
11:00
凯瑞斯

---

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

您必须在on change处理程序中处理它

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

---

下面是一个工作示例

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

---

如果我没有弄错，下面是工作代码：

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>

JS

.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() == "");
 });

还提供

如您所知，当使用

select2

时，此插件隐藏

select

元素并向您显示一些生成的

HTML

（而不是

select

），您可以使用浏览器控制台检查生成的HTML

更新

如果

#select

是您的目标，您可以将代码更改为以下内容，那么您提到的问题（在评论部分）将得到解决：

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

---

首先，您在

边框

的简写css声明中缺少

边框样式

。是否已添加

警报

类？你能查一下吗？谢谢！更新！是，已添加警报类，但不起作用。按钮单击功能$（“#搜索”）。单击（函数（）{…}按钮单击函数…$（“#搜索”）。单击（函数（）{…}检查我的编辑。希望这能回答任何问题。谢谢，但不与我一起工作选择2。添加警报类是工作。css不是！

$('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() == "");
 });

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