【AI-Coding】2025再实现简单的省市联动

写在开始 ：
1️⃣ 本博客只作为个人记录学习使用，如果涉及版权等其他问题，辛苦及时联系小编修改或者下架；谢谢
2️⃣ 本文只简单展示了简单的省份、城市和区县的城市选择器，仅展示效果和代码，有兴趣的可以看看哈～

1-1 AI第一次实现效果预览

话不多说,直接看效果图,AI生成的,应该是react…

1-2 代码code

import { useState, useEffect } from "react";
import { 
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Card } from "@/components/ui/card";
import { Label } from "@/components/ui/label";

const Index = () => {
  const [province, setProvince] = useState("");
  const [city, setCity] = useState("");
  const [district, setDistrict] = useState("");
  
  // 省份数据
  const provinces = [
    { value: "beijing", label: "北京" },
    { value: "shanghai", label: "上海" },
    { value: "anhui", label: "安徽" },
    { value: "jiangsu", label: "江苏" }
  ];
  
  // 城市数据 - 根据省份动态变化
  const [cities, setCities] = useState([]);
  
  // 区县数据 - 根据城市动态变化
  const [districts, setDistricts] = useState([]);
  
  // 当省份变化时更新城市列表
  useEffect(() => {
    if (!province) {
      setCities([]);
      setCity("");
      return;
    }
    
    // 模拟不同省份对应的城市数据
    const citiesMap = {
      beijing: [{ value: "beijing", label: "北京市" }],
      shanghai: [{ value: "shanghai", label: "上海市" }],
      anhui: [
        { value: "hefei", label: "合肥市" },
        { value: "wuhu", label: "芜湖市" },
        { value: "bengbu", label: "蚌埠市" },
        { value: "xuancheng", label: "宣城市" }
      ],
      jiangsu: [
        { value: "nanjing", label: "南京市" },
        { value: "suzhou", label: "苏州市" },
        { value: "wuxi", label: "无锡市" }
      ]
    };
    
    setCities(citiesMap[province] || []);
    setCity("");
  }, [province]);
  
  // 当城市变化时更新区县列表
  useEffect(() => {
    if (!city) {
      setDistricts([]);
      setDistrict("");
      return;
    }
    
    // 模拟不同城市对应的区县数据
    const districtsMap = {
      beijing: [
        { value: "haidian", label: "海淀区" },
        { value: "chaoyang", label: "朝阳区" },
        { value: "dongcheng", label: "东城区" }
      ],
      shanghai: [
        { value: "pudong", label: "浦东新区" },
        { value: "huangpu", label: "黄浦区" },
        { value: "xuhui", label: "徐汇区" }
      ],
      hefei: [
        { value: "luyang", label: "庐阳区" },
        { value: "baohe", label: "包河区" },
        { value: "yaohai", label: "瑶海区" }
      ],
      nanjing: [
        { value: "gulou", label: "鼓楼区" },
        { value: "qinhuai", label: "秦淮区" },
        { value: "jianye", label: "建邺区" }
      ],
      suzhou: [
        { value: "gusu", label: "姑苏区" },
        { value: "wuzhong", label: "吴中区" },
        { value: "xiangcheng", label: "相城区" }
      ],
      xuancheng: [
        { value: "xuanzhou", label: "宣州区" },
        { value: "jingxian", label: "泾县" },
        { value: "guangde", label: "广德市" },
        { value: "ningguo", label: "宁国市" },
        { value: "langxi", label: "郎溪县" },
        { value: "jingde", label: "旌德县" },
        { value: "jixi", label: "绩溪县" }
      ]
    };
    
    setDistricts(districtsMap[city] || []);
    setDistrict("");
  }, [city]);
  
  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-3xl font-bold mb-8 text-center">地区选择</h1>
        
        <Card className="p-6 shadow-md">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {/* 省份选择 */}
            <div className="space-y-2">
              <Label htmlFor="province" className="text-sm font-medium">
                省份
              </Label>
              <Select
                value={province}
                onValueChange={(value) => setProvince(value)}
              >
                <SelectTrigger id="province" className="w-full">
                  <SelectValue placeholder="请选择省份" />
                </SelectTrigger>
                <SelectContent>
                  {provinces.map((item) => (
                    <SelectItem key={item.value} value={item.value}>
                      {item.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            
            {/* 城市选择 */}
            <div className="space-y-2">
              <Label htmlFor="city" className="text-sm font-medium">
                城市
              </Label>
              <Select
                value={city}
                onValueChange={(value) => setCity(value)}
                disabled={!province}
              >
                <SelectTrigger id="city" className="w-full">
                  <SelectValue placeholder={province ? "请选择城市" : "请先选择省份"} />
                </SelectTrigger>
                <SelectContent>
                  {cities.map((item) => (
                    <SelectItem key={item.value} value={item.value}>
                      {item.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            
            {/* 区县选择 */}
            <div className="space-y-2">
              <Label htmlFor="district" className="text-sm font-medium">
                行政区
              </Label>
              <Select
                value={district}
                onValueChange={(value) => setDistrict(value)}
                disabled={!city}
              >
                <SelectTrigger id="district" className="w-full">
                  <SelectValue placeholder={city ? "请选择行政区" : "请先选择城市"} />
                </SelectTrigger>
                <SelectContent>
                  {districts.map((item) => (
                    <SelectItem key={item.value} value={item.value}>
                      {item.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
          
          {/* 显示选择结果 */}
          {(province || city || district) && (
            <div className="mt-8 p-4 bg-blue-50 rounded-md">
              <h3 className="font-medium mb-2">当前选择:</h3>
              <div className="space-y-1 text-sm">
                {province && (
                  <p>省份: {provinces.find(p => p.value === province)?.label}</p>
                )}
                {city && (
                  <p>城市: {cities.find(c => c.value === city)?.label}</p>
                )}
                {district && (
                  <p>行政区: {districts.find(d => d.value === district)?.label}</p>
                )}
              </div>
            </div>
          )}
        </Card>
      </div>
    </div>
  );
};

export default Index;

2-1 HTML实现的效果预览

2-2 HTML-code

<!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: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        select {
            margin: 10px 0;
            padding: 5px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>省市区选择器</h2>
        <select id="province">
            <option value="">请选择省份</option>
        </select>
        <br>
        <select id="city">
            <option value="">请选择城市</option>
        </select>
        <br>
        <select id="district">
            <option value="">请选择区县</option>
        </select>
    </div>

    <script>
        const data = {
            "北京": {
                "北京市": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"]
            },
            "上海": {
                "上海市": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区", "崇明区"]
            },
            "安徽": {
                "合肥市": ["瑶海区", "庐阳区", "蜀山区", "包河区", "长丰县", "肥东县", "肥西县", "庐江县", "巢湖市"],
                "芜湖市": ["镜湖区", "弋江区", "鸠江区", "三山区", "芜湖县", "繁昌县", "南陵县", "无为县"],
                "蚌埠市": ["龙子湖区", "蚌山区", "禹会区", "淮上区", "怀远县", "五河县", "固镇县"],
                "宣城市": ["宣州区", "泾县", "广德市", "宁国市", "郎溪县", "旌德县", "绩溪县"]
            },
            "江苏": {
                "南京市": ["玄武区", "秦淮区", "建邺区", "鼓楼区", "浦口区", "栖霞区", "雨花台区", "江宁区", "六合区", "溧水区", "高淳区"],
                "苏州市": ["姑苏区", "虎丘区", "吴中区", "相城区", "吴江区", "常熟市", "张家港市", "昆山市", "太仓市"],
                "无锡市": ["梁溪区", "新吴区", "锡山区", "惠山区", "滨湖区", "江阴市", "宜兴市"]
            }
        };

        const provinceSelect = document.getElementById('province');
        const citySelect = document.getElementById('city');
        const districtSelect = document.getElementById('district');

        // 初始化省份下拉框
        for (let province in data) {
            provinceSelect.options.add(new Option(province, province));
        }

        // 省份选择改变时更新城市
        provinceSelect.onchange = function() {
            citySelect.length = 1; // 清空城市下拉框，只保留请选择
            districtSelect.length = 1; // 清空区县下拉框，只保留请选择
            if (this.value === '') return;

            for (let city in data[this.value]) {
                citySelect.options.add(new Option(city, city));
            }
        };

        // 城市选择改变时更新区县
        citySelect.onchange = function() {
            districtSelect.length = 1; // 清空区县下拉框，只保留请选择
            if (this.value === '') return;

            let districts = data[provinceSelect.value][this.value];
            for (let i = 0; i < districts.length; i++) {
                districtSelect.options.add(new Option(districts[i], districts[i]));
            }
        };
    </script>
</body>
</html>

3-1 jQuery版本-效果预览

3-2 jQuery版本代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>省市区级联选择 - jQuery版本</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        select {
            margin: 10px 0;
            padding: 8px;
            width: 100%;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        h2 {
            color: #333;
            text-align: center;
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>省市区选择</h2>
        <div class="form-group">
            <label for="province">省份：</label>
            <select id="province">
                <option value="">请选择省份</option>
            </select>
        </div>
        <div class="form-group">
            <label for="city">城市：</label>
            <select id="city">
                <option value="">请选择城市</option>
            </select>
        </div>
        <div class="form-group">
            <label for="district">区县：</label>
            <select id="district">
                <option value="">请选择区县</option>
            </select>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            const data = {
                "北京": {
                    "北京市": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"]
                },
                "上海": {
                    "上海市": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区", "崇明区"]
                },
                "安徽": {
                    "合肥市": ["瑶海区", "庐阳区", "蜀山区", "包河区", "长丰县", "肥东县", "肥西县", "庐江县", "巢湖市"],
                    "芜湖市": ["镜湖区", "弋江区", "鸠江区", "三山区", "芜湖县", "繁昌县", "南陵县", "无为县"],
                    "蚌埠市": ["龙子湖区", "蚌山区", "禹会区", "淮上区", "怀远县", "五河县", "固镇县"],
                    "宣城市": ["宣州区", "泾县", "广德市", "宁国市", "郎溪县", "旌德县", "绩溪县"]
                },
                "江苏": {
                    "南京市": ["玄武区", "秦淮区", "建邺区", "鼓楼区", "浦口区", "栖霞区", "雨花台区", "江宁区", "六合区", "溧水区", "高淳区"],
                    "苏州市": ["姑苏区", "虎丘区", "吴中区", "相城区", "吴江区", "常熟市", "张家港市", "昆山市", "太仓市"],
                    "无锡市": ["梁溪区", "新吴区", "锡山区", "惠山区", "滨湖区", "江阴市", "宜兴市"]
                }
            };

            // 初始化省份下拉框
            $.each(data, function(province) {
                $('#province').append($('<option>', {
                    value: province,
                    text: province
                }));
            });

            // 省份选择改变时更新城市
            $('#province').change(function() {
                $('#city').html('<option value="">请选择城市</option>');
                $('#district').html('<option value="">请选择区县</option>');
                
                const selectedProvince = $(this).val();
                if (selectedProvince === '') return;

                $.each(data[selectedProvince], function(city) {
                    $('#city').append($('<option>', {
                        value: city,
                        text: city
                    }));
                });
            });

            // 城市选择改变时更新区县
            $('#city').change(function() {
                $('#district').html('<option value="">请选择区县</option>');
                
                const selectedProvince = $('#province').val();
                const selectedCity = $(this).val();
                if (selectedCity === '') return;

                const districts = data[selectedProvince][selectedCity];
                $.each(districts, function(index, district) {
                    $('#district').append($('<option>', {
                        value: district,
                        text: district
                    }));
                });
            });
        });
    </script>
</body>
</html>

4-1 VUE版本效果预览

4-2 VUE代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>省市区级联选择 - Vue版本</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        select {
            margin: 10px 0;
            padding: 8px;
            width: 100%;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        h2 {
            color: #333;
            text-align: center;
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            color: #555;
        }
        .selected-info {
            margin-top: 20px;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 4px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <h2>省市区选择</h2>
        <div class="form-group">
            <label for="province">省份：</label>
            <select id="province" v-model="selectedProvince" @change="provinceChanged">
                <option value="">请选择省份</option>
                <option v-for="(cities, province) in regionData" :value="province">{{ province }}</option>
            </select>
        </div>
        <div class="form-group">
            <label for="city">城市：</label>
            <select id="city" v-model="selectedCity" @change="cityChanged" :disabled="!selectedProvince">
                <option value="">请选择城市</option>
                <option v-for="(districts, city) in cities" :value="city">{{ city }}</option>
            </select>
        </div>
        <div class="form-group">
            <label for="district">区县：</label>
            <select id="district" v-model="selectedDistrict" :disabled="!selectedCity">
                <option value="">请选择区县</option>
                <option v-for="district in districts" :value="district">{{ district }}</option>
            </select>
        </div>
        
        <div class="selected-info" v-if="selectedProvince || selectedCity || selectedDistrict">
            <p>当前选择：</p>
            <p v-if="selectedProvince">省份：{{ selectedProvince }}</p>
            <p v-if="selectedCity">城市：{{ selectedCity }}</p>
            <p v-if="selectedDistrict">区县：{{ selectedDistrict }}</p>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                regionData: {
                    "北京": {
                        "北京市": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"]
                    },
                    "上海": {
                        "上海市": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区", "崇明区"]
                    },
                    "安徽": {
                        "合肥市": ["瑶海区", "庐阳区", "蜀山区", "包河区", "长丰县", "肥东县", "肥西县", "庐江县", "巢湖市"],
                        "芜湖市": ["镜湖区", "弋江区", "鸠江区", "三山区", "芜湖县", "繁昌县", "南陵县", "无为县"],
                        "蚌埠市": ["龙子湖区", "蚌山区", "禹会区", "淮上区", "怀远县", "五河县", "固镇县"],
                        "宣城市": ["宣州区", "泾县", "广德市", "宁国市", "郎溪县", "旌德县", "绩溪县"]
                    },
                    "江苏": {
                        "南京市": ["玄武区", "秦淮区", "建邺区", "鼓楼区", "浦口区", "栖霞区", "雨花台区", "江宁区", "六合区", "溧水区", "高淳区"],
                        "苏州市": ["姑苏区", "虎丘区", "吴中区", "相城区", "吴江区", "常熟市", "张家港市", "昆山市", "太仓市"],
                        "无锡市": ["梁溪区", "新吴区", "锡山区", "惠山区", "滨湖区", "江阴市", "宜兴市"]
                    }
                },
                selectedProvince: '',
                selectedCity: '',
                selectedDistrict: '',
                cities: {},
                districts: []
            },
            methods: {
                provinceChanged() {
                    this.selectedCity = '';
                    this.selectedDistrict = '';
                    this.districts = [];
                    if (this.selectedProvince) {
                        this.cities = this.regionData[this.selectedProvince];
                    } else {
                        this.cities = {};
                    }
                },
                cityChanged() {
                    this.selectedDistrict = '';
                    if (this.selectedCity) {
                        this.districts = this.regionData[this.selectedProvince][this.selectedCity];
                    } else {
                        this.districts = [];
                    }
                }
            }
        });
    </script>
</body>
</html>

写在最后 ： 如果觉得还不错，或者对您有帮助，麻烦动动小手，点赞或者关注，谢谢！