jquery - 通过 jquery 中的索引相互更改两个选择框选项

Question

假设我有两个这样的选择框

<select id="emp">
    <option value="emp1"> Emp Name 1</option>
    <option value="emp2"> Emp Name 2</option>
    <option value="emp3"> Emp Name 3</option>
    <option value="emp4"> Emp Name 4</option>
</select>


<select id="salary">
    <option value="sal1"> $1000</option>
    <option value="sal2"> $2000</option>
    <option value="sal3"> $3000</option>
    <option value="sal4"> $4000</option>
</select>

这里两个选择框都没有相同的选项。现在，如果有人从工资选择框中选择$3000，则emp选择框将自动选择值“Emp Name 3” ，或者任何人从emp选择框中选择一个值，即“Emp Name 2” ，那么工资选择框将自动选择值$2000。但问题是我不明白该怎么做。因此，如果有人对此有任何想法，请告诉我。

标签： jquery

Answer 1

您可以通过在选择元素更改时获取所选选项的索引然后更改另一个选择元素中的选项来实现这一点。

这是代码：

$('#emp').on("change", function(){
 var index = $('#emp')[0].selectedIndex;

 $("#salary").prop('selectedIndex', index);
})

$('#salary').on("change", function(){
 var index = $('#salary')[0].selectedIndex;

 $("#emp").prop('selectedIndex', index);
})

我的小提琴：https ://jsfiddle.net/arz1wmLj/4/