尝试使用父子下拉列表填充组合框

<select id="parentSelect">
  <option value="">请选择父级选项</option>
  <!-- 父级选项列表 -->
</select>

<select id="childSelect">
  <option value="">请选择子级选项</option>
  <!-- 子级选项列表 -->
</select>

document.getElementById('parentSelect').addEventListener('change', function() {
  // 处理父级选项变化的逻辑
});

document.getElementById('parentSelect').addEventListener('change', function() {
  var parentValue = this.value; // 获取用户选择的父级选项的值

  // 根据父级选项的值加载对应的子级选项数据
  var childOptions = loadChildOptions(parentValue);

  // 清空子级下拉列表
  var childSelect = document.getElementById('childSelect');
  childSelect.innerHTML = '';

  // 填充子级选项到子级下拉列表
  childOptions.forEach(function(option) {
    var optionElement = document.createElement('option');
    optionElement.value = option.value;
    optionElement.textContent = option.text;
    childSelect.appendChild(optionElement);
  });
});

function loadChildOptions(parentValue) {
  // 根据父级选项的值加载对应的子级选项数据
  // 可以通过Ajax请求后端接口获取数据，或者从本地数据源获取数据

  // 示例：根据父级选项的值获取子级选项数据
  var childOptions = [];

  if (parentValue === 'option1') {
    childOptions = [
      { value: 'child1', text: '子级选项1' },
      { value: 'child2', text: '子级选项2' },
      // 其他子级选项
    ];
  } else if (parentValue === 'option2') {
    childOptions = [
      { value: 'child3', text: '子级选项3' },
      { value: 'child4', text: '子级选项4' },
      // 其他子级选项
    ];
  }

  return childOptions;
}