html数组二级联动下拉列表

HTML数组二级联动下拉列表是一种常见的前端技术，用于实现根据用户选择的一级选项，动态加载对应的二级选项。以下是实现该功能的基本步骤：

1. 创建HTML结构：使用`<select>`标签创建一级和二级下拉列表，并为它们添加id属性，用于后续的JavaScript操作。

2. 定义数据源：创建一个JavaScript数组，包含一级选项和对应的二级选项。可以使用对象数组或者嵌套数组的形式存储数据。

3. 编写JavaScript代码：通过事件监听，当一级下拉列表的选项改变时，根据选中的值动态生成对应的二级下拉列表选项。

具体实现步骤如下：

HTML结构：

<select id="firstSelect" onchange="changeSecondSelect()">
    <option value="">请选择一级选项</option>
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <!-- 其他一级选项 -->
</select>

<select id="secondSelect">
    <option value="">请选择二级选项</option>
</select>

JavaScript代码：

// 定义数据源
var data = {
    option1: ["二级选项1-1", "二级选项1-2", "二级选项1-3"],
    option2: ["二级选项2-1", "二级选项2-2", "二级选项2-3"]
    // 其他一级选项对应的二级选项
};

// 一级下拉列表改变时触发的函数
function changeSecondSelect() {
    var firstSelect = document.getElementById("firstSelect");
    var secondSelect = document.getElementById("secondSelect");
    var selectedValue = firstSelect.value;

    // 清空二级下拉列表
    secondSelect.innerHTML = "<option value=''>请选择二级选项</option>";

    // 根据一级选项生成对应的二级选项
    if (selectedValue !== "") {
        var options = data[selectedValue];
        for (var i = 0; i < options.length; i++) {
            var option = document.createElement("option");
            option.value = options[i];
            option.innerHTML = options[i];
            secondSelect.appendChild(option);
        }
    }
}