Добавьте класс в строку выбора опций, если выбрана опция выбора.

Question

У меня есть целая группа строк с выделенными элементами. Я хочу применить класс к строке элемента select, если выбран конкретный параметр выбора.

На данный момент я пытаюсь это, но это не работает:

$('#statusselect').prop("selectedIndex", 1).closest('tr').each(function(){ 
    $(this).addClass('waiting');  
}); 

Это строка DOM, которая повторяется несколько раз, но выбрать пункт будет иметь различные элементы выбраны:

<tr> 
    <td>08/11/15</td> 
    <td>Name</td> 
    <td>Task</td> 
    <td>Name2</td> 
    <td>11/11/15</td> 
    <td> 
    <select class="form-control" id="statusselect" name="status_"> 
     <option value="Not Started">Not Started</option> 
     <option value="Waiting">Waiting</option> 
     <option value="Completed">Completed</option> 
    </select> 
    </td> 
</tr> 

Я новичок в jquery, поэтому я, вероятно, делаю что-то немое. Спасибо за вашу помощь.

Answer 1

Просто используйте прослушиватель событий change() в jQuery.

$('#statusselect').change(function() { 
    if($(this).val() == "Waiting") 
     $(this).closest("tr").addClass("green"); 
    else 
     $(this).closest("tr").removeClass("green"); 
}); 

См рабочий пример on JSFiddle.net (слушатель событий вызывается на смену «ожидание»).

---

EDIT

Причина, почему ваш код не так, потому что вы использовали closest("tr") на собственностиselectedIndex из #statusSelect элемента, НЕэлемент сам, с этим кодом:

... prop("selectedIndex", 1).closest('tr') ... 

Кроме того, поскольку closest() выбирает только один элемент, нет необходимости в функции итератора each(). Вы можете просто сделать это:

... closest('tr').addClass('waiting'); 

---

EDIT 2

По желанию, способ добавить класс динамически всех <select> элементов:

$('#statusselect').each(function() { 
    if($(this).val() == "Waiting") { 
     $(this).addClass("waiting"); 
    } 
}); 

Это, по существу, то же, что и в предыдущем примере, за исключением того, что он вызывается при загрузке, и нет необходимости в removeClass(), если он не выбран (поскольку n o элемент выбирается при загрузке).

Кроме того, если у вас есть несколько <select> элементов, его лучше поместить их в class вместо id (потому что id s должны быть уникальными), например, так:

<select class="statusSelect"> 

и выбрать их как так:

$(".statusSelect") ...