从具有相同数据的多个下拉列表中选择不同的值

<select id="list1">
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
  <option value="value3">Option 3</option>
</select>

<select id="list2">
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
  <option value="value3">Option 3</option>
</select>

<!-- 可以创建更多的下拉列表 -->

// 获取下拉列表的引用
var list1 = document.getElementById("list1");
var list2 = document.getElementById("list2");

// 监听change事件
list1.addEventListener("change", updateLists);
list2.addEventListener("change", updateLists);

// 定义事件处理函数
function updateLists() {
  var selectedValue = this.value; // 获取当前选中的值

  // 更新其他下拉列表的选中项
  if (this === list1) {
    list2.value = selectedValue;
    // 可以更新更多的下拉列表
  } else if (this === list2) {
    list1.value = selectedValue;
    // 可以更新更多的下拉列表
  }
}