js实现select二级联动下拉菜单

营销型网站
2023-12-01 07:34:17

下面我来为您详细讲解“JS实现Select二级联动下拉菜单”的完整攻略。

什么是Select二级联动下拉菜单？

Select二级联动下拉菜单是指，一个下拉菜单的选项列表包含多个分组，每个分组由一个optgroup标签包裹，而每个分组内又有多个子选项，由option标签包裹。

在Select二级联动下拉菜单中，当第一个下拉菜单的选项发生变化时，第二个下拉菜单的选项列表会随之更新，只显示与第一个下拉菜单选项相关的子选项。

实现步骤

1. HTML结构

首先，我们需要在HTML中设置好两个Select下拉菜单，其中第二个Select隐藏（display:none），以便在后面使用JavaScript控制其显示/隐藏。以下是一个简单的HTML结构：

<select id="select1">
    <option>请选择</option>
    <option value="1">选项1</option>
    <<option value="2">选项2</option>
</select>

<select id="select2" style="display:none;">
    <option>请选择</option>
    <optgroup label="选项1">
        <option value="11">选项1-1</option>
        <option value="12">选项1-2</option>
    </optgroup>
    <optgroup label="选项2">
        <option value="21">选项2-1</option>
        <option value="22">选项2-2</option>
    </optgroup>
</select>

2. JavaScript实现

接下来，我们使用JavaScript实现下拉菜单的联动效果。具体步骤如下：

2.1 获取Select元素

我们首先需要获取HTML中的两个Select元素，以便后面操作。使用JavaScript获取Select元素的方法有很多种，这里我使用了最简单的document.getElementById()方法。

var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");

2.2 给第一个Select元素绑定onchange事件

当第一个Select元素选项发生变化时，我们需要执行相应的操作，即更新第二个Select元素的选项列表。我们可以通过为第一个Select元素绑定onchange事件来实现：

select1.onchange = function() {
    // 更新第二个下拉菜单
}

2.3 根据第一个Select选项更新第二个下拉菜单

当第一个Select选项发生变化时，我们需要动态更新第二个下拉菜单的选项列表。这里我们可以使用一个JavaScript对象来保存第二个下拉菜单的选项，然后根据第一个Select当前选中的选项来更新第二个下拉菜单的选项。

var options = {
    "1": [
        {"text":"选项1-1","value":"11"},
        {"text":"选项1-2","value":"12"}
    ],
    "2": [
        {"text":"选项2-1","value":"21"},
        {"text":"选项2-2","value":"22"}
    ]
};

// 获取第一个下拉菜单当前选中的选项
var value = select1.value;

// 更新第二个下拉菜单的选项列表
if (options.hasOwnProperty(value)) {
    select2.length = 0; // 先清空选项列表
    var optgroup = document.createElement("optgroup");
    optgroup.label = "请选择";
    select2.appendChild(optgroup);

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

    select2.style.display = "inline"; // 显示第二个下拉菜单
} else {
    // 如果第一个下拉菜单选择了“请选择”，则隐藏第二个下拉菜单
    select2.style.display = "none";
}

3. 完整示例

下面是一个完整的实现Select二级联动下拉菜单的示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Select二级联动下拉菜单</title>
</head>
<body>
    <select id="select1">
        <option>请选择</option>
        <option value="1">选项1</option>
        <option value="2">选项2</option>
    </select>

    <select id="select2" style="display:none;">
        <option>请选择</option>
        <optgroup label="选项1">
            <option value="11">选项1-1</option>
            <option value="12">选项1-2</option>
        </optgroup>
        <optgroup label="选项2">
            <option value="21">选项2-1</option>
            <option value="22">选项2-2</option>
        </optgroup>
    </select>

    <script>
        var select1 = document.getElementById("select1");
        var select2 = document.getElementById("select2");

        var options = {
            "1": [
                {"text":"选项1-1","value":"11"},
                {"text":"选项1-2","value":"12"}
            ],
            "2": [
                {"text":"选项2-1","value":"21"},
                {"text":"选项2-2","value":"22"}
            ]
        };

        select1.onchange = function() {
            var value = select1.value;

            if (options.hasOwnProperty(value)) {
                select2.length = 0;
                var optgroup = document.createElement("optgroup");
                optgroup.label = "请选择";
                select2.appendChild(optgroup);

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

                select2.style.display = "inline";
            } else {
                select2.style.display = "none";
            }
        };
    </script>
</body>
</html>

以上就是JS实现Select二级联动下拉菜单的完整攻略。通过以上步骤和示例，您应该可以成功实现一个简单且实用的Select二级联动下拉菜单了。