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

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

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>

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

两个下拉列表的代码都具有相同的功能。有没有有效的方法来减少代码？比如声明一个公共函数并将其用于两个下拉列表（比如原型）

这是你的电话号码

将公共

类

添加到这两个下拉列表中

使用公共类在元素上绑定

change

事件

使用

sides（）

设置其他下拉列表的

值

使用

trigger（）

更新页面加载时的下拉值

$（'.mySelect'）。在（'change'，function（）上{
var newVal=$（this.val（）='a'？'b'：'a'；
$（this.sibbins（'.mySelect'）.val（newVal）；
//更短
//$（this）.sides（'.mySelect'）.val（$（this.val（）=='a'？'b'：'a'）；
}).触发（“变更”）

A.
B
A.
B
像这样吗


$（'one，'two'）。on（'change'，function（）{
var other=（$（this.attr（'id'）=='one'）？'two'：'one'；
var值=（$（this.val（）='a'）？'b'：'a'；
美元（其他）.val（价值）；
});

A.
B
A.
B
当然，有很多方法可以做到这一点：

function onChange($element, $other) {
  if($element.val() == 'a'){
    $other.val("b")
  }else if($other.val() == 'b'){
    $element.val("a")
  }
}

请看这里：


函数onChange（$element，$other）{
如果（$element.val（）=='a'）{
$other.val（“b”）
}else if（$element.val（）==“b”）{
$other.val（“a”）
}
}
$（'one，'two'）.change（function（）{
var other=$（'one，'two'）。不是（这个）；
onChange（$（本），其他）；
})

A.
B
A.
B
使其成为一个具有两个参数的函数，用于传递下拉列表ID：

$("#one").change(switchSelection("#two", "#one"));

$("#two").change(switchSelection("#one", "#two"));

function switchSelection(x, y) {
    if($(y).val() == 'a') {
        $(x).val("b")
    }
    else if ($(x).val() == 'b') {
        $(y).val("a");
    }
};

考虑到您的代码，最简单的方法（虽然不是最有效的）是将select元素作为参数传递给公共函数调用

var handleChange = function($select, $linkedSelect){
    if($select.val() == 'a'){
        $linkedSelect.val("b")
    }else if($select.val() == 'b'){
        $linkedSelect.val("a")
    }
}; 

$("#one").change(function(){
    handleChange($(this),$('#two'));
});

$("#two").change(function(){
    handleChange($(this),$('#one'));
});

如果您希望绑定多个DOM元素，那么我建议使用Knockout或AngularJS
$('#one,#two').change(function() {
 var opositeIdObj = {"one":"two","two":"one"};
 var opositeValObj = {"a":"b","b":"a"};
 $("#"+opositeIdObj[this.id]).val(opositeValObj[this.value]);
}).trigger('change');