如何用一个select字段的值填充其他select字段并保留单独修改权限

嘿，这需求其实挺常见的，咱们可以通过JavaScript监听主选择框的变化来同步更新其他选择框，同时完全保留每个选择框独立修改的能力。下面给你详细的实现步骤和代码示例：

核心思路 #

• 给第一个（主）select绑定change事件，当它的选中值改变时，把这个值同步到所有其他select元素上
• 其他select元素本身的交互不受影响，用户可以随时单独修改任意一个选择框的值

完整代码示例 #

HTML 部分 #

<!-- 主选择框 -->
<select id="mainSelect">
  <option value="volvo">Volvo</option>
  <option value="audi">Audi</option>
  <option value="bmw">BMW</option>
  <option value="toyota">Toyota</option>
</select>

<!-- 需要同步的选择框们 -->
<select class="syncSelect">
  <option value="volvo">Volvo</option>
  <option value="audi">Audi</option>
  <option value="bmw">BMW</option>
  <option value="toyota">Toyota</option>
</select>
<select class="syncSelect">
  <option value="volvo">Volvo</option>
  <option value="audi">Audi</option>
  <option value="bmw">BMW</option>
  <option value="toyota">Toyota</option>
</select>
<select class="syncSelect">
  <option value="volvo">Volvo</option>
  <option value="audi">Audi</option>
  <option value="bmw">BMW</option>
  <option value="toyota">Toyota</option>
</select>

JavaScript 部分 #

// 获取主选择框和所有需要同步的选择框
const mainSelect = document.getElementById('mainSelect');
const syncSelects = document.querySelectorAll('.syncSelect');

// 给主选择框绑定change事件
mainSelect.addEventListener('change', function() {
  // 获取当前主选择框的选中值
  const selectedValue = this.value;
  // 遍历所有需要同步的选择框，设置它们的value为选中值
  syncSelects.forEach(select => {
    select.value = selectedValue;
  });
});

代码说明 #

• 我们给主选择框设置了id="mainSelect"方便快速获取；给需要同步的选择框统一加了class="syncSelect"，这样可以批量选中目标元素
• 当主选择框的选项改变时，会触发change事件，我们在事件回调里拿到当前选中的值，然后用forEach遍历所有同步选择框，把它们的value设置成主选择框的值
• 每个同步选择框本身可以正常修改，因为只有主选择框的change事件会触发同步操作，用户手动修改其他选择框时不会触发这个逻辑，完全不影响独立修改的需求

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