Question

我有两个select元素如下：对不起以前我犯了错误..因为我确实喜欢这个

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

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

Answer 1

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

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

演示

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

＆＃13;

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

＆＃13;

.newClass {
    background: #f00;
}

＆＃13;

<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>

＆＃13;

Answer 2

试试这个，

$('.services_list1').change(function(){
    $(this).next().attr("class", "yourNewClassName");
});

在上面的代码中，jQuery将搜索下一个元素，并将class名称替换为yourNewClassName。

Answer 3

如果要在选择1st select元素时删除现有类并将新类添加到2nd select元素，则代码下方可以正常工作。

HTML代码

<select class="services_list1">
    <option>Value1</option>
    <option>Value2</option>
    <option>Value3</option>
</select>
<select class="services_list2">
    <option>Value1</option>
    <option>Value2</option>
    <option>Value3</option>
</select>

jQuery代码

    $(document).ready(function(){
        $(".services_list1").change(function(){
            $(this).next().removeClass().addClass('testCls1');
        });
    });

http://jsfiddle.net/7a7nmk3a/

更改相邻选择元素的类名

3 个答案:

演示