js实现三级级联

<select id="level1">
  <option value="">请选择</option>
  <!-- 一级选项将通过JavaScript动态生成 -->
</select>

<select id="level2" disabled>
  <option value="">请选择</option>
  <!-- 二级选项将通过JavaScript动态生成 -->
</select>

<select id="level3" disabled>
  <option value="">请选择</option>
  <!-- 三级选项将通过JavaScript动态生成 -->
</select>

const data = {
  "选项1": {
    "子选项1-1": ["子子选项1-1-1", "子子选项1-1-2"],
    "子选项1-2": ["子子选项1-2-1"]
  },
  "选项2": {
    // ...其他数据
  }
};

const level1 = document.getElementById('level1');
const level2 = document.getElementById('level2');
const level3 = document.getElementById('level3');

// 初始化一级选项
for (let key in data) {
  const option = document.createElement('option');
  option.value = key;
  option.textContent = key;
  level1.appendChild(option);
}

// 监听一级选项变化
level1.addEventListener('change', function() {
  const selected = this.value;
  level2.innerHTML = '<option value="">请选择</option>';
  level3.innerHTML = '<option value="">请选择</option>';
  level3.disabled = true;

  if (selected) {
    level2.disabled = false;
    for (let subKey in data[selected]) {
      const option = document.createElement('option');
      option.value = subKey;
      option.textContent = subKey;
      level2.appendChild(option);
    }
  } else {
    level2.disabled = true;
    level3.disabled = true;
  }
});

// 监听二级选项变化（逻辑类似于一级选项的变化监听）
// ...（省略二级和三级的完整监听代码，逻辑与一级相似）