中国省市区三级联动选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国省市区三级联动选择器</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .address-selector {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
        }
        select {
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: white;
            font-size: 16px;
            flex: 1;
            min-width: 0;
        }
        .result {
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 4px;
            border-left: 4px solid #4CAF50;
        }
        .loading {
            text-align: center;
            color: #666;
            font-style: italic;
        }
        .note {
            margin-top: 30px;
            font-size: 14px;
            color: #666;
            text-align: center;
        }
        /* 广告样式 */
        .ad-container {
            margin: 20px 0;
            padding: 10px;
            background-color: #f0f0f0;
            text-align: center;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>中国省市区三级联动选择器</h1>
        
        <div class="address-selector">
            <select id="province">
                <option value="">请选择省份</option>
            </select>
            <select id="city">
                <option value="">请选择城市</option>
            </select>
            <select id="district">
                <option value="">请选择区县</option>
            </select>
        </div>
        
        <div class="result" id="address-result">
            请选择省市区查看结果
        </div>
        
        
        <div class="note">
            本插件使用jQuery实现,数据来源于公开行政区划信息
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            // 省份数据
            const provinces = [
                {code: '11', name: '北京市'},
                {code: '12', name: '天津市'},
                {code: '13', name: '河北省'},
                {code: '14', name: '山西省'},
                {code: '15', name: '内蒙古自治区'},
                {code: '21', name: '辽宁省'},
                {code: '22', name: '吉林省'},
                {code: '23', name: '黑龙江省'},
                {code: '31', name: '上海市'},
                {code: '32', name: '江苏省'},
                {code: '33', name: '浙江省'},
                {code: '34', name: '安徽省'},
                {code: '35', name: '福建省'},
                {code: '36', name: '江西省'},
                {code: '37', name: '山东省'},
                {code: '41', name: '河南省'},
                {code: '42', name: '湖北省'},
                {code: '43', name: '湖南省'},
                {code: '44', name: '广东省'},
                {code: '45', name: '广西壮族自治区'},
                {code: '46', name: '海南省'},
                {code: '50', name: '重庆市'},
                {code: '51', name: '四川省'},
                {code: '52', name: '贵州省'},
                {code: '53', name: '云南省'},
                {code: '54', name: '西藏自治区'},
                {code: '61', name: '陕西省'},
                {code: '62', name: '甘肃省'},
                {code: '63', name: '青海省'},
                {code: '64', name: '宁夏回族自治区'},
                {code: '65', name: '新疆维吾尔自治区'},
                {code: '71', name: '台湾省'},
                {code: '81', name: '香港特别行政区'},
                {code: '82', name: '澳门特别行政区'}
            ];

            // 城市数据
            const cities = {
                '11': [{code: '1101', name: '北京市'}],
                '12': [{code: '1201', name: '天津市'}],
                '13': [
                    {code: '1301', name: '石家庄市'}, {code: '1302', name: '唐山市'}, {code: '1303', name: '秦皇岛市'},
                    {code: '1304', name: '邯郸市'}, {code: '1305', name: '邢台市'}, {code: '1306', name: '保定市'},
                    {code: '1307', name: '张家口市'}, {code: '1308', name: '承德市'}, {code: '1309', name: '沧州市'},
                    {code: '1310', name: '廊坊市'}, {code: '1311', name: '衡水市'}
                ],
                // 其他省份城市数据...
                '31': [{code: '3101', name: '上海市'}],
                '32': [
                    {code: '3201', name: '南京市'}, {code: '3202', name: '无锡市'}, {code: '3203', name: '徐州市'},
                    {code: '3204', name: '常州市'}, {code: '3205', name: '苏州市'}, {code: '3206', name: '南通市'},
                    {code: '3207', name: '连云港市'}, {code: '3208', name: '淮安市'}, {code: '3209', name: '盐城市'},
                    {code: '3210', name: '扬州市'}, {code: '3211', name: '镇江市'}, {code: '3212', name: '泰州市'},
                    {code: '3213', name: '宿迁市'}
                ],
                '44': [
                    {code: '4401', name: '广州市'}, {code: '4402', name: '韶关市'}, {code: '4403', name: '深圳市'},
                    {code: '4404', name: '珠海市'}, {code: '4405', name: '汕头市'}, {code: '4406', name: '佛山市'},
                    {code: '4407', name: '江门市'}, {code: '4408', name: '湛江市'}, {code: '4409', name: '茂名市'},
                    {code: '4412', name: '肇庆市'}, {code: '4413', name: '惠州市'}, {code: '4414', name: '梅州市'},
                    {code: '4415', name: '汕尾市'}, {code: '4416', name: '河源市'}, {code: '4417', name: '阳江市'},
                    {code: '4418', name: '清远市'}, {code: '4419', name: '东莞市'}, {code: '4420', name: '中山市'},
                    {code: '4451', name: '潮州市'}, {code: '4452', name: '揭阳市'}, {code: '4453', name: '云浮市'}
                ]
            };

            // 区县数据
            const districts = {
                '1101': [
                    {code: '110101', name: '东城区'}, {code: '110102', name: '西城区'}, {code: '110105', name: '朝阳区'},
                    {code: '110106', name: '丰台区'}, {code: '110107', name: '石景山区'}, {code: '110108', name: '海淀区'},
                    {code: '110109', name: '门头沟区'}, {code: '110111', name: '房山区'}, {code: '110112', name: '通州区'},
                    {code: '110113', name: '顺义区'}, {code: '110114', name: '昌平区'}, {code: '110115', name: '大兴区'},
                    {code: '110116', name: '怀柔区'}, {code: '110117', name: '平谷区'}, {code: '110118', name: '密云区'},
                    {code: '110119', name: '延庆区'}
                ],
                '3101': [
                    {code: '310101', name: '黄浦区'}, {code: '310104', name: '徐汇区'}, {code: '310105', name: '长宁区'},
                    {code: '310106', name: '静安区'}, {code: '310107', name: '普陀区'}, {code: '310109', name: '虹口区'},
                    {code: '310110', name: '杨浦区'}, {code: '310112', name: '闵行区'}, {code: '310113', name: '宝山区'},
                    {code: '310114', name: '嘉定区'}, {code: '310115', name: '浦东新区'}, {code: '310116', name: '金山区'},
                    {code: '310117', name: '松江区'}, {code: '310118', name: '青浦区'}, {code: '310120', name: '奉贤区'},
                    {code: '310151', name: '崇明区'}
                ],
                '4401': [
                    {code: '440103', name: '荔湾区'}, {code: '440104', name: '越秀区'}, {code: '440105', name: '海珠区'},
                    {code: '440106', name: '天河区'}, {code: '440111', name: '白云区'}, {code: '440112', name: '黄埔区'},
                    {code: '440113', name: '番禺区'}, {code: '440114', name: '花都区'}, {code: '440115', name: '南沙区'},
                    {code: '440117', name: '从化区'}, {code: '440118', name: '增城区'}
                ],
                '4403': [
                    {code: '440303', name: '罗湖区'}, {code: '440304', name: '福田区'}, {code: '440305', name: '南山区'},
                    {code: '440306', name: '宝安区'}, {code: '440307', name: '龙岗区'}, {code: '440308', name: '盐田区'},
                    {code: '440309', name: '龙华区'}, {code: '440310', name: '坪山区'}, {code: '440311', name: '光明区'}
                ]
            };

            // 初始化省份下拉框
            function initProvinces() {
                const $province = $('#province');
                provinces.forEach(province => {
                    $province.append(`<option value="${province.code}">${province.name}</option>`);
                });
            }

            // 加载城市数据
            function loadCities(provinceCode) {
                const $city = $('#city');
                $city.empty().append('<option value="">请选择城市</option>');
                $('#district').empty().append('<option value="">请选择区县</option>');
                
                if (!provinceCode) return;
                
                const cityList = cities[provinceCode] || [];
                cityList.forEach(city => {
                    $city.append(`<option value="${city.code}">${city.name}</option>`);
                });
            }

            // 加载区县数据
            function loadDistricts(cityCode) {
                const $district = $('#district');
                $district.empty().append('<option value="">请选择区县</option>');
                
                if (!cityCode) return;
                
                const districtList = districts[cityCode] || [];
                districtList.forEach(district => {
                    $district.append(`<option value="${district.code}">${district.name}</option>`);
                });
            }

            // 更新结果显示
            function updateResult() {
                const provinceCode = $('#province').val();
                const cityCode = $('#city').val();
                const districtCode = $('#district').val();
                
                if (!provinceCode) {
                    $('#address-result').text('请选择省市区查看结果');
                    return;
                }
                
                const provinceName = $('#province option:selected').text();
                const cityName = $('#city option:selected').text();
                const districtName = $('#district option:selected').text();
                
                let result = `您选择的地址是:${provinceName}`;
                
                if (cityName) result += ` ${cityName}`;
                if (districtName) result += ` ${districtName}`;
                
                $('#address-result').text(result);
            }

            // 初始化
            initProvinces();
            
            // 省份变化事件
            $('#province').change(function() {
                loadCities($(this).val());
                updateResult();
            });
            
            // 城市变化事件
            $('#city').change(function() {
                loadDistricts($(this).val());
                updateResult();
            });
            
            // 区县变化事件
            $('#district').change(updateResult);
        });
    </script>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值