如何使用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> 

如何添加邊框只有一個選擇二元素？

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/