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

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")
    }
});

两个下拉菜单的代码执行相同的功能。有什么有效的方法可以减少代码？喜欢声明一个通用函数并将其用于两个下拉菜单(如原型(prototype))？

这是 JSFiddle .

Answer 1

1. 将通用 类 添加到下拉列表中。
2. 使用通用类在元素上绑定(bind)change事件
3. 使用siblings()设置其他下拉的value
4. 使用 trigger() 在页面加载时更新下拉值。

Demo

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