JS制作简单的三级联动

下面是关于如何制作简单的三级联动的完整攻略：

1. 准备工作

在开始制作三级联动前，我们需要准备以下工作：

• HTML结构：需要有三个下拉框用于显示省、市和区。
• 数据源：需要有一个数据源，用于存储所有的省市区信息。
• JS代码：需要用JS代码来实现三级联动的功能。

2. HTML结构

下面是一个简单的HTML结构示例，包含了三个下拉框：

<select id="province"></select>
<select id="city"></select>
<select id="area"></select>

这里需要给每个下拉框设置一个唯一的ID，我们可以通过ID来获取它们的值。

3. 数据源

在这里提供一个简单的JSON数据源示例，用于存储所有的省市区信息。

var data = {
    "北京": {
        "市辖区": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"]
    },
    "上海": {
        "市辖区": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区"],
    },
    "天津": {
        "市辖区": ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "滨海新区", "宁河区", "静海区", "蓟州区"]
    }
};

在这个JSON数据源中，每个省都是一个属性，键是省的名称，值是一个对象。这个对象包含了该省下属的所有市区信息，以及市下属的区信息。

4. JS代码

接下来是关键的JS代码部分，用于实现三级联动的核心功能。这里提供一份完整的JS代码，包含了省、市、区三个下拉框的变化处理。

var province = document.getElementById("province");
var city = document.getElementById("city");
var area = document.getElementById("area");

// 初始化省下拉框
for (var p in data) {
    var option = document.createElement("option");
    option.innerText = p;
    province.appendChild(option);
}

// 省下拉框变化时，更新市下拉框和区下拉框
province.onchange = function() {
    // 清空市下拉框和区下拉框
    city.innerHTML = "";
    area.innerHTML = "";
    // 获取省下拉框选择的值
    var p = this.value;
    if (!p) return;
    // 更新市下拉框
    for (var c in data[p]) {
        var option = document.createElement("option");
        option.innerText = c;
        city.appendChild(option);
    }
};

// 市下拉框变化时，更新区下拉框
city.onchange = function() {
    // 清空区下拉框
    area.innerHTML = "";
    // 获取省下拉框和市下拉框选择的值
    var p = province.value;
    var c = this.value;
    if (!p || !c) return;
    // 更新区下拉框
    for (var a of data[p][c]) {
        var option = document.createElement("option");
        option.innerText = a;
        area.appendChild(option);
    }
};

可以看到，这个JS代码通过操作DOM元素来实现三级联动的功能。在该代码中，我们分别获取了省、市、区三个下拉框的DOM元素，并初始化了省下拉框的选项。

当省下拉框的选项发生变化时，我们会先清空市下拉框和区下拉框，然后根据省下拉框选择的值来更新市下拉框的选项。

当市下拉框的选项发生变化时，我们会先清空区下拉框，然后根据省下拉框和市下拉框选择的值来更新区下拉框的选项。

5. 示例说明

下面提供两条三级联动的示例说明：

示例1：基本的三级联动

假设我们现在有一个网站需要实现三级联动，其HTML元素和JS代码如下所示：

<select id="province"></select>
<select id="city"></select>
<select id="area"></select>

<script>
// ... 这里是JS代码 ...
</script>

在该页面下，用户可以选择省市区来查询相关信息。当用户选择了省市区之后，网站会根据用户的选择来更新相应的信息。

示例2：动态更新数据源的三级联动

假设我们现在的数据源是动态加载的，我们需要在数据源更新后调整下拉框的选项。

var data = {}; // 初始数据为空

// 动态加载数据源
loadData(function(result) {
    data = result; // 更新数据源
    updateSelect(); // 更新下拉框
});

function updateSelect() {
    // ... 这里是省市区下拉框的HTML结构代码 ...
    // ... 这里是省市区下拉框的JS代码 ...
}

在该页面下，当数据源加载完成后，页面会自动更新省市区下拉框的选项。同时，用户可以选择省市区来查询相关信息，网站会根据用户的选择来更新相应的信息。

这就是制作简单的三级联动的完整攻略。希望对你有所帮助。