javascript - 更改相邻选择元素的类名

Question

我有两个 select 元素如下: 抱歉之前我弄错了..因为我就是这样

<td>
    <select class="services_list1"></select>
</td>
<td>
    <select class="services_list2"></select>
</td>

如果我更改 .services_list1 上的任何选项，我需要更改第二个选择元素的类名，其中 .services_list2。这可能吗？

Answer 1

是的。您可以使用 jQuery's next() method 通过 .services_list1 元素上的 change 事件执行此操作选择下一个元素:

$('.services_list1').change(function() {
    // Add a class to .services_list2
    $(this).next().addClass('newClass');
});

---

演示

在此演示中，如果您更改第一个 select 选项，第二个 select 将被赋予一个新类，其样式也会发生变化。

$('.services_list1').change(function() {
  // Add a class to .services_list2
  $(this).next().addClass('newClass');
});

.newClass {
    background: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="services_list1">
  <option>Change Me</option>
  <option>Select This</option>
</select>
<select class="services_list2">
  <option>Value 1</option>
  <option>Value 2</option>
</select>