如何创建相互依赖的下拉列表

创建相互依赖的下拉列表可以通过以下步骤实现：

HTML结构：在HTML中创建两个下拉列表元素，一个作为主列表，另一个作为从属列表。给每个下拉列表元素添加一个唯一的ID。

<select id="mainList"></select>
<select id="subList"></select>

JavaScript代码：使用JavaScript来实现下拉列表的相互依赖关系。首先，获取主列表和从属列表的元素。

var mainList = document.getElementById("mainList");
var subList = document.getElementById("subList");

定义数据：创建一个包含主列表和从属列表的数据对象。该对象的键值对表示主列表选项和对应的从属列表选项。

var data = {
  option1: ["subOption1", "subOption2", "subOption3"],
  option2: ["subOption4", "subOption5"],
  option3: ["subOption6", "subOption7", "subOption8"],
};

添加事件监听器：为主列表添加一个"change"事件监听器，当主列表选项改变时，更新从属列表的选项。

mainList.addEventListener("change", function() {
  var selectedOption = mainList.options[mainList.selectedIndex].value;
  updateSubList(selectedOption);
});

更新从属列表：根据主列表选项的值，更新从属列表的选项。

function updateSubList(selectedOption) {
  subList.innerHTML = ""; // 清空从属列表的选项

  var subOptions = data[selectedOption]; // 获取对应的从属列表选项

  // 创建从属列表的选项并添加到从属列表元素中
  for (var i = 0; i < subOptions.length; i++) {
    var option = document.createElement("option");
    option.text = subOptions[i];
    subList.add(option);
  }
}

完整的代码示例：

<select id="mainList"></select>
<select id="subList"></select>

<script>
  var mainList = document.getElementById("mainList");
  var subList = document.getElementById("subList");

  var data = {
    option1: ["subOption1", "subOption2", "subOption3"],
    option2: ["subOption4", "subOption5"],
    option3: ["subOption6", "subOption7", "subOption8"],
  };

  mainList.addEventListener("change", function() {
    var selectedOption = mainList.options[mainList.selectedIndex].value;
    updateSubList(selectedOption);
  });

  function updateSubList(selectedOption) {
    subList.innerHTML = "";

    var subOptions = data[selectedOption];

    for (var i = 0; i < subOptions.length; i++) {
      var option = document.createElement("option");
      option.text = subOptions[i];
      subList.add(option);
    }
  }
</script>

这样，当主列表的选项改变时，从属列表的选项会根据主列表选项的值进行更新。根据实际需求，可以修改数据对象和选项的显示方式来适应不同的场景。

腾讯云相关产品和产品介绍链接地址：