下面我来为您详细讲解“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>