JS下拉框二级联动|极客笔记

JS下拉框二级联动

在网页开发中，下拉框是一种常用的表单元素，它可以让用户从预定义的选项中选择一个值。有时候我们需要实现下拉框的二级联动，即一个下拉框的选择会影响另一个下拉框的选项。本文将详细介绍如何使用JavaScript实现下拉框的二级联动效果。

HTML结构

首先，我们需要在HTML文件中定义两个下拉框元素，分别用于存放一级选项和二级选项。以下是一个简单的HTML结构示例：

<!DOCTYPE html>
<html>
<head>
    <title>下拉框二级联动示例</title>
</head>
<body>
    <label for="firstSelect">一级选项：</label>
    <select id="firstSelect" onchange="updateSecondSelect()">
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
    </select>

    <label for="secondSelect">二级选项：</label>
    <select id="secondSelect">
        <option value="a">选项a</option>
        <option value="b">选项b</option>
        <option value="c">选项c</option>
    </select>

    <script src="script.js"></script>
</body>
</html>

在上面的代码中，我们定义了两个下拉框元素，分别是id为firstSelect和secondSelect的select元素。第一个下拉框用于选择一级选项，第二个下拉框用于显示二级选项。我们为第一个下拉框绑定了onchange事件，当用户选择一级选项时会触发updateSecondSelect()函数。

JavaScript实现

接下来，我们需要在script.js文件中编写JavaScript代码，用于实现下拉框的二级联动效果。以下是完整的script.js代码示例：

function updateSecondSelect() {
    var firstSelect = document.getElementById("firstSelect");
    var secondSelect = document.getElementById("secondSelect");

    var selectedValue = firstSelect.value;

    secondSelect.innerHTML = ""; // 清空原有选项

    if (selectedValue === "1") {
        var options = ["选项a", "选项b", "选项c"];
    } else if (selectedValue === "2") {
        var options = ["选项d", "选项e", "选项f"];
    } else if (selectedValue === "3") {
        var options = ["选项g", "选项h", "选项i"];
    }

    for (var i = 0; i < options.length; i++) {
        var option = document.createElement("option");
        option.text = options[i];
        option.value = options[i];
        secondSelect.add(option);
    }
}

在上面的代码中，我们定义了一个updateSecondSelect()函数，用于根据一级选项的选择更新二级选项的内容。在函数中，我们通过document.getElementById()方法获取到一级和二级下拉框的元素，然后根据一级下拉框的值选择需要展示的二级选项内容，并将其动态添加到二级下拉框中。