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

如果我找到你的话，这里有代码：

<强> 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");

Answer 2

你必须在变更处理程序

中处理它

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

Answer 3

这是一个有效的例子。

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

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

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

3 个答案: