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（事件监听器在更改为＆＃34时被调用;等待＆＃34;）。

修改

您的代码错误的原因是您在closest("tr")元素的属性 selectedIndex上使用了#statusSelect， NOT 元素本身，使用以下代码：

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

另外，因为closest()只选择一个元素，所以不需要each()迭代器函数。你可以这样做：

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

编辑2

根据请求，一种将类动态添加到所有<select>元素的方法：

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

这与前面的示例基本相同，只是在加载时调用它，如果没有选择它，则不需要removeClass()（因为在加载时没有选择元素）。

此外，如果您有多个<select>元素，最好将它们放在class而不是id中（因为id应该是唯一的），像这样：

<select class="statusSelect">

并选择它们：

$(".statusSelect") ...

如果选择了特定选择选项，则将类添加到选择选项行

1 个答案: