Как добавить границу в элемент Select2 с помощью jQuery?

Question

Я пытаюсь добавить границу в Select2 с помощью jQuery, но это не работает.

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 с помощью консоли браузера

Update

Если #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/