如果選擇了特定的選項，將一個類添加到選擇選項行中

Question

我有一大堆行中包含選擇項。如果選擇了特定的選擇選項，我想將一個類應用到選擇項目的行中。

此刻我想這一點，但它不工作：

$('#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

只需在jQuery中使用change()事件偵聽器。

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

查看工作示例on JSFiddle.net（事件監聽器在更改爲「waiting」時調用）。

---

編輯

的原因，爲什麼你的代碼是錯誤的，是因爲你在財產使用closest("tr")selectedIndex的#statusSelect元素，不的元素本身，使用此代碼：

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

另外，因爲closest()只選擇一個元素，所以不需要迭代器函數。你可以簡單地這樣做：

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

---

EDIT 2

通過請求的方式動態地添加類的所有<select>元素：

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

這實質上是與前面的示例相同，不同之處在於它是在加載時調用的，並且如果未選中則不需要removeClass()（因爲n在加載時選擇元素）。

此外，如果您有多個<select>元素，最好把它們放在一個class而不是id（因爲id s的應該是唯一的），像這樣：

<select class="statusSelect"> 

，並選擇他們喜歡所以：

$(".statusSelect") ...