- 创建HTML结构：首先，在HTML中创建两个
<select>元素，一个用于一级选项（父级），另一个用于二级选项（子级）。添加相应的id属性以便在JavaScript中引用它们。
<select id="parentSelect"> <option value="">请选择一级选项</option> <option value="option1">选项1</option> <option value="option2">选项2</option> <!-- 添加更多一级选项 --> </select> <select id="childSelect"> <option value="">请选择二级选项</option> </select>
2.接下来，使用JavaScript来实现动态加载和更新二级选项的功能。可以通过监听一级选项的change事件，根据所选的一级选项值来动态生成对应的二级选项。
// 获取一级和二级选择框元素 var parentSelect = document.getElementById("parentSelect"); var childSelect = document.getElementById("childSelect"); // 定义一级选项和对应的二级选项数据 var optionsData = { option1: ["子选项1", "子选项2", "子选项3"], option2: ["子选项4", "子选项5", "子选项6"], // 根据需要添加更多一级选项和对应的二级选项数据 }; // 监听一级选项的change事件 parentSelect.addEventListener("change", function() { var selectedValue = parentSelect.value; // 清空二级选项 childSelect.innerHTML = '<option value="">请选择二级选项</option>'; // 根据一级选项值动态生成对应的二级选项 if (selectedValue && optionsData.hasOwnProperty(selectedValue)) { var childOptions = optionsData[selectedValue]; for (var i = 0; i < childOptions.length; i++) { var option = document.createElement("option"); option.value = childOptions[i]; option.textContent = childOptions[i]; childSelect.appendChild(option); } } });
