使用js在一个下拉框中实现选择一个选项后可选择子选项

您可以使用 JavaScript 监听父级下拉框的选项变化事件，根据选中的选项来动态生成子级下拉框的选项。

以下是一个示例代码：

HTML：

<select id="parent-select">
  <option value="">请选择</option>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<select id="child-select">
  <option value="">请选择</option>
</select>

JavaScript：

// 获取父级下拉框和子级下拉框的 DOM 节点
var parentSelect = document.getElementById("parent-select");
var childSelect = document.getElementById("child-select");

// 定义子级选项
var childOptions = {
  "1": ["子选项1-1", "子选项1-2", "子选项1-3"],
  "2": ["子选项2-1", "子选项2-2", "子选项2-3"],
  "3": ["子选项3-1", "子选项3-2", "子选项3-3"]
};

// 监听父级下拉框的选项变化事件
parentSelect.addEventListener("change", function() {
  // 清空子级下拉框的选项
  childSelect.innerHTML = "<option value=''>请选择</option>";
  
  // 获取选中的父级选项的值
  var parentValue = parentSelect.value;
  
  // 如果父级选项有对应的子级选项，则动态生成子级选项
  if (childOptions[parentValue]) {
    childOptions[parentValue].forEach(function(option) {
      var optionElement = document.createElement("option");
      optionElement.value = option;
      optionElement.textContent = option;
      childSelect.appendChild(optionElement);
    });
  }
});

在这个示例中，我们使用了一个对象来存储每个父级选项对应的子级选项，然后在父级选项变化时，根据选中的父级选项的值来动态生成相应的子级选项。您可以根据实际需求修改子级选项的数据来源和生成方式。