如何实现两个独立下拉框同步选中相同选项？

核心思路 #

监听两个下拉框的change事件，当任意一个下拉框的选项发生改变时，将另一个下拉框的选中值设置为当前选中的值即可。

完整实现代码 #

HTML 部分

<label for="cars1">Choose a car:</label>

<select name="cars" id="cars1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>


<label for="cars2">Choose a car:</label>

<select name="cars" id="cars2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

注：修正了原HTML中label的for属性，使其对应各自下拉框的ID，确保点击标签能正确关联到对应的下拉框。

JavaScript 部分

方法一：单独绑定事件（适合固定两个下拉框的场景）

const cars1 = document.getElementById('cars1');
const cars2 = document.getElementById('cars2');

// 监听cars1的变化，同步到cars2
cars1.addEventListener('change', function() {
  cars2.value = this.value;
});

// 监听cars2的变化，同步到cars1
cars2.addEventListener('change', function() {
  cars1.value = this.value;
});

方法二：批量处理（适合后续可能新增同类下拉框的场景）

const carSelects = document.querySelectorAll('select[name="cars"]');

carSelects.forEach(select => {
  select.addEventListener('change', function() {
    // 遍历所有同类下拉框，将当前值同步给其他下拉框
    carSelects.forEach(otherSelect => {
      if (otherSelect !== this) {
        otherSelect.value = this.value;
      }
    });
  });
});

补充说明 #

• 两种方法都能实现任意下拉框选中后，其他下拉框同步选中相同选项的效果。
• 方法二扩展性更强，后续新增同name属性的下拉框时，无需修改JS代码即可自动支持同步。

内容的提问来源于stack exchange，提问作者cvz