网站建站哪家公司好一点长春网站建设

写在开始 ：
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><Selectvalue={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><Selectvalue={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><Selectvalue={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>

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