js实现select三级联动效果

基础概念

三级联动效果通常用于网页表单中，允许用户通过选择第一个下拉菜单（select）中的选项来动态更新第二个下拉菜单的选项，进而影响第三个下拉菜单的选项。这种效果可以通过JavaScript和AJAX技术实现，以实现动态数据加载和用户交互。

类型

静态数据联动：使用预定义的数据数组来实现联动效果。
动态数据联动：通过AJAX请求从服务器获取数据来实现联动。

应用场景

地址选择：省、市、区三级联动。
商品分类：大类、中类、小类联动。
时间选择：年、月、日联动。

示例代码

以下是一个简单的JavaScript实现三级联动的示例，假设我们有三个下拉菜单分别对应省、市、区。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动示例</title>
<script>
// 假设这是从服务器获取的数据
var data = {
    "北京市": {
        "北京市": ["东城区", "西城区", "朝阳区"]
    },
    "上海市": {
        "上海市": ["黄浦区", "徐汇区", "长宁区"]
    }
};

function updateCities() {
    var province = document.getElementById("province").value;
    var citiesSelect = document.getElementById("city");
    citiesSelect.innerHTML = ""; // 清空城市选项
    if (data[province]) {
        for (var city in data[province]) {
            var option = document.createElement("option");
            option.value = city;
            option.text = city;
            citiesSelect.appendChild(option);
        }
        updateDistricts(); // 更新区域
    }
}

function updateDistricts() {
    var province = document.getElementById("province").value;
    var city = document.getElementById("city").value;
    var districtsSelect = document.getElementById("district");
    districtsSelect.innerHTML = ""; // 清空区域选项
    if (data[province] && data[province][city]) {
        for (var district of data[province][city]) {
            var option = document.createElement("option");
            option.value = district;
            option.text = district;
            districtsSelect.appendChild(option);
        }
    }
}
</script>
</head>
<body>

<select id="province" onchange="updateCities()">
    <option value="">请选择省份</option>
    <option value="北京市">北京市</option>
    <option value="上海市">上海市</option>
</select>

<select id="city" onchange="updateDistricts()">
    <option value="">请选择城市</option>
</select>

<select id="district">
    <option value="">请选择区域</option>
</select>

</body>
</html>