js世界地区三级联动

基础概念

JavaScript世界地区三级联动是指在前端页面上实现国家、省份/州、城市三个层级的下拉菜单联动效果。用户选择国家后，省份/州的下拉菜单会动态更新为该国家的省份/州列表；选择省份/州后，城市下拉菜单会更新为该省份/州的城市列表。

类型

静态数据联动：预先定义好所有国家和省份/州的城市数据，通过JavaScript进行数据匹配。
动态数据联动：通过AJAX请求从服务器获取实时数据，适用于数据量较大或需要频繁更新的场景。

应用场景

注册页面：用户填写个人信息时选择地址。
物流系统：选择配送地址时使用。
数据分析工具：按地区筛选数据。

示例代码

以下是一个简单的静态数据联动的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动示例</title>
</head>
<body>
    <select id="country">
        <option value="">请选择国家</option>
        <option value="china">中国</option>
        <option value="usa">美国</option>
    </select>
    <select id="province">
        <option value="">请选择省份</option>
    </select>
    <select id="city">
        <option value="">请选择城市</option>
    </select>

    <script>
        const data = {
            china: {
                provinces: {
                    guangdong: ['广州', '深圳', '珠海'],
                    sichuan: ['成都', '绵阳', '乐山']
                }
            },
            usa: {
                provinces: {
                    california: ['洛杉矶', '旧金山', '圣地亚哥'],
                    texas: ['休斯顿', '达拉斯', '奥斯汀']
                }
            }
        };

        document.getElementById('country').addEventListener('change', function() {
            const country = this.value;
            const provinceSelect = document.getElementById('province');
            const citySelect = document.getElementById('city');
            provinceSelect.innerHTML = '<option value="">请选择省份</option>';
            citySelect.innerHTML = '<option value="">请选择城市</option>';

            if (country) {
                for (const [province, cities] of Object.entries(data[country].provinces)) {
                    const option = document.createElement('option');
                    option.value = province;
                    option.textContent = province;
                    provinceSelect.appendChild(option);
                }
            }
        });

        document.getElementById('province').addEventListener('change', function() {
            const province = this.value;
            const country = document.getElementById('country').value;
            const citySelect = document.getElementById('city');
            citySelect.innerHTML = '<option value="">请选择城市</option>';

            if (province) {
                const cities = data[country].provinces[province];
                for (const city of cities) {
                    const option = document.createElement('option');
                    option.value = city;
                    option.textContent = city;
                    citySelect.appendChild(option);
                }
            }
        });
    </script>
</body>
</html>