如何创建二级联动下拉选择列表？

需求说明 #

实现二级联动下拉功能：选择第一个列表的选项后，第二个列表自动加载对应分类的子选项。

修正后的完整代码 #

HTML 代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级联动下拉列表</title>
    <script defer src="./js/main.js"></script>
</head>
<body>
    <header>
        <h1>Moshe Brito</h1>
        <h2>41088278</h2>
    </header>
    <main>
        <div>
            <label for="first">一级分类</label>
            <select id="first" name="first">
                <option value="" selected>请选择一级分类</option>
            </select>
        </div>
        <div>
            <label for="second">二级选项</label>
            <select id="second" name="second">
                <option value="" selected>请先选择一级分类</option>
            </select>
        </div>
    </main>
</body>
</html>

JavaScript 代码

// 联动数据源：一级分类对应二级选项
const data = [
    { item: '水果', subitems: ['苹果', '香蕉', '菠萝', '西瓜'] },
    { item: '餐食', subitems: ['鸡肉', '培根', '猪肉', '牛肉'] },
    { item: '动物', subitems: ['猫', '兔子', '老鼠', '狮子'] },
    { item: '笔记本品牌', subitems: ['戴尔', '惠普', '苹果', '索尼'] },
];

window.onload = function() {
    // 获取两个下拉列表元素
    const firstSel = document.getElementById("first");
    const secondSel = document.getElementById("second");

    // 初始化一级分类下拉列表
    data.forEach((category, index) => {
        // 创建选项：显示文本是分类名，value存数组索引
        const option = new Option(category.item, index);
        firstSel.add(option);
    });

    // 一级分类选择变化时触发联动
    firstSel.onchange = function() {
        // 清空二级列表（保留默认提示项）
        secondSel.length = 1;
        
        // 获取选中的一级分类索引
        const selectedIndex = this.value;
        if (!selectedIndex) return; // 若选的是默认提示项，不做后续操作

        // 加载对应二级选项
        const subitems = data[selectedIndex].subitems;
        subitems.forEach(item => {
            const option = new Option(item, item);
            secondSel.add(option);
        });
    };
};

关键实现要点 #

• 数据源匹配：用数组存储一级分类和对应的二级选项，结构清晰易维护
• 元素ID对应：确保JS中获取的元素ID和HTML里的ID完全一致（原代码存在ID不匹配问题）
• 初始化一级列表：遍历数据源，把每个一级分类添加到第一个下拉列表
• 联动逻辑：监听第一个列表的onchange事件，选中后清空二级列表（保留默认提示），再根据选中的分类加载对应的二级选项
• 边界处理：如果用户选择的是默认提示项（空值），不执行加载二级选项的逻辑

内容的提问来源于stack exchange，提问作者Moshe Brito