同步两个select元素：仅视觉同步，关联功能未触发求助

我是编程新手，若问题表述有误还请见谅。我需要同步两个select下拉框，目前仅实现了视觉同步，但第二个下拉框box2的关联功能（选中值后显示按钮）未生效，该功能仅在手动选中box2时才正常工作，请求帮助。

现有代码 #

<select id="box1">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select id="box2">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<script>
function sync(el1, el2) {
  if (!el1) {
    return false;
  } else {
    document.getElementById(el2).options[el1.selectedIndex].selected = true;
  }
}

var selectToSync = document.getElementById('box1');
selectToSync.onchange = function() {
  sync(this, 'box2');
}; 
</script>

相关提示翻译 #

你只是在视觉层面修改了选中状态，并没有更新对应的模型，还破坏了绑定关系，这就是功能失效的原因

解决办法 #

问题核心是：直接修改DOM的selected属性只会改变视觉状态，不会触发box2的change事件，而box2的关联功能（显示按钮）应该是依赖这个事件才会执行。

修改sync函数，同步选中状态后手动触发change事件：

function sync(el1, el2Id) {
  if (!el1) return false;
  const el2 = document.getElementById(el2Id);
  // 直接设置选中索引，更简洁可靠
  el2.selectedIndex = el1.selectedIndex;
  // 手动触发change事件，让关联功能感知状态变化
  el2.dispatchEvent(new Event('change'));
}

这样修改后，box1同步box2时，不仅视觉状态一致，还会触发box2的关联逻辑，实现完整的功能同步。

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