如何通过JavaScript实现母下拉框联动所有子下拉框选中值？

问题需求 #

当母下拉框（id为motherselect）的选中值改变时，同步修改所有子下拉框（childselect1、childselect2……最多上百个）的选中值。

现有HTML结构 #

<select name="motherselect" id="motherselect">
  <option value="0" selected="selected">none</option>
  <option value="7401">7401</option>
  <option value="7402">7402</option>
  <!-- 更多选项 -->
</select>

<select name="childselect1" id="childselect">
  <option value="0" selected="selected">none</option>
  <option value="7401">7401</option>
  <option value="7402">7402</option>
  <!-- 更多选项 -->
</select>
<select name="childselect2" id="childselect">
  <option value="0" selected="selected">none</option>
  <option value="7401">7401</option>
  <option value="7402">7402</option>
  <!-- 更多选项 -->
</select>
<!-- 更多子下拉框，直至上百个 -->

现有问题 #

当前代码仅能修改第一个子下拉框的选中值，原代码如下：

<script>
  $(document).ready(function() {
    $('#motherselect').on('change', function() {
      $('#childselect').val($('#motherselect :selected').val());
    });
  });
</script>

原因是$('#childselect')只会匹配第一个拥有该id的元素，而HTML规范要求id属性必须唯一，多个元素复用id本身就不符合标准。

解决方案 #

1. 规范HTML后用jQuery实现（推荐） #

首先修改子下拉框的id为唯一值，并添加统一的class（比如child-select），既符合HTML规范，又方便批量选择元素：

<!-- 修改后的子下拉框示例 -->
<select name="childselect1" id="childselect1" class="child-select">
  <!-- 选项内容 -->
</select>
<select name="childselect2" id="childselect2" class="child-select">
  <!-- 选项内容 -->
</select>

然后修改JavaScript代码：

$(document).ready(function() {
  $('#motherselect').on('change', function() {
    const selectedVal = $(this).val();
    // 批量设置所有子下拉框的选中值
    $('.child-select').val(selectedVal);
  });
});

2. 不修改HTML的兼容方案（不推荐） #

如果暂时无法修改HTML结构，可以通过属性选择器匹配所有id为childselect的元素：

$(document).ready(function() {
  $('#motherselect').on('change', function() {
    const selectedVal = $(this).val();
    // 用属性选择器选中所有id为childselect的元素
    $('[id="childselect"]').val(selectedVal);
  });
});

⚠️ 注意：这种方式只是临时兼容，长期来看必须修复id重复的问题，否则会引发其他DOM操作异常。

3. 原生JavaScript实现（无需jQuery） #

如果不想依赖jQuery，同样推荐先给子下拉框添加统一class，再用原生JS实现：

document.addEventListener('DOMContentLoaded', function() {
  const motherSel = document.getElementById('motherselect');
  const childSels = document.querySelectorAll('.child-select');
  
  motherSel.addEventListener('change', function() {
    const selectedVal = this.value;
    // 遍历所有子下拉框设置值
    childSels.forEach(sel => sel.value = selectedVal);
  });
});

如果不修改HTML，用原生属性选择器：

document.addEventListener('DOMContentLoaded', function() {
  const motherSel = document.getElementById('motherselect');
  const childSels = document.querySelectorAll('[id="childselect"]');
  
  motherSel.addEventListener('change', function() {
    const selectedVal = this.value;
    childSels.forEach(sel => sel.value = selectedVal);
  });
});

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