如何以不同的方式使用相同的功能？

Question

我有两个下拉菜单.当我在第一个下拉列表中选择一个选项时,第二个下拉列表值将根据第一个下拉列值进行更改.

HTML代码

<select id="one">
    <option value="a">A</option>
    <option value="b">B</option>
</select>
<select id="two">
    <option value="a">A</option>
    <option value="b">B</option>
</select>

JS代码

$("#one").change(function () {
    if ($("#one").val() == 'a') {
        $("#two").val("b")
    } else if ($("#one").val() == 'b') {
        $("#two").val("a")
    }
});

$("#two").change(function () {
    if ($("#two").val() == 'a') {
        $("#one").val("b")
    } else if ($("#two").val() == 'b') {
        $("#one").val("a")
    }
});

两个下拉列表的代码都执行相同的功能.有没有有效的方法来减少代码？就像声明一个共同的功能并将它用于两个下拉菜单(如原型)？

这是JSFiddle.

Answer 1

1. class在两个下拉列表中添加common .
2. change使用公共类在元素上绑定事件
3. 使用siblings()设置value其他下拉列表
4. 使用trigger()更新的页面加载的下拉值.

演示

$('.mySelect').on('change', function() {
  var newVal = $(this).val() == 'a' ? 'b' : 'a';
  $(this).siblings('.mySelect').val(newVal);

  // Even Shorter
  // $(this).siblings('.mySelect').val($(this).val() == 'a' ? 'b' : 'a');
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select id="one" class="mySelect">
  <option value="a">A</option>
  <option value="b">B</option>
</select>
<select id="two" class="mySelect">
  <option value="a">A</option>
  <option value="b">B</option>
</select>