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 Name 3” 或任何人从 emp selectbox 选择一个值，即“ Emp Name 2” ，然后 salary selectbox 会自动被选择为 $ 2000 < / strong>。但是问题是我不明白该怎么做。因此，如果有人对此有任何想法，请告诉我。

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/

Answer 2

最简单的方法是使用selectedIndex的{{1}}属性。在变更处理程序中获取当前值，然后分配给其他选择

<select>

var $selects = $('#emp, #salary').on('change', function(){
   $selects.not(this).prop('selectedIndex', this.selectedIndex)
})

在jQuery中

2 个答案: