vue.js实现省市区三级联动

最新推荐文章于 2025-06-08 11:15:36 发布

qq_43109978

最新推荐文章于 2025-06-08 11:15:36 发布

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_43109978/article/details/99719247

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用Vue.js创建一个级联选择器，通过动态加载省、市、区数据，实现联动效果。该选择器能根据用户选择的省份自动更新城市列表，进一步更新区县列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
	<title>第一个vue界面</title>
	<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="my">
	<p>{{province}}</p>
	<select v-model='province' @change="updateCity();updateDistrict()">
		<option v-for="v in arr">{{v.name}}</option>
	</select>
	<p>{{city}}</p>
	<select v-model='city' @change="updateDistrict()">
		<option v-for="v in cityArr">{{v.name}}</option>
	</select>
	<p>{{district}}</p>
	<select v-model='district' v-if="district">
		<option v-for="v in districtArr">{{v.name}}</option>
	</select>
</div>
</body>
</html>
<script type="text/javascript" src="demo.js"></script>

window.onload = function(){
	var myvue = new Vue({
		el:'#my',
		data:{
			province:'北京',
			city:'北京',
			district:'',
			cityArr:[],
			districtArr:[],
			arr:[{
				name:'北京',
				sub:[
					{name:'请选择',sub:[]},
					{
						name:'北京',
					 	sub:[{name:'请选择'},{name:'东城区'},{name:'西城区'},{name:'平谷区'},]
					 },
				]
			},
			{
				name:'陕西',
				sub:[
					{name:'请选择',sub:[]},
					{
						name:'西安',
						sub:[{name:'请选择'},{name:'长安区'},{name:'未央区'},{name:'韦曲南'},]
					},
					{
						name:'渭南',
						sub:[{name:'大荔'},{name:'韩城'},{name:'合阳'},{name:'华县'},]
					}
				]
			},
			]
		},
		methods:{
			updateCity:function(){ //更新市数据
				var self = this;
				this.arr.forEach(function(item,index){
					if(item.name == self.province){
						self.cityArr = item.sub;
					}
				});
				// 选择一级后，二级的城市名要跟着改变
				self.city = self.cityArr[1].name;
			},
			updateDistrict:function(){ //更新市数据
				var self = this;
				this.cityArr.forEach(function(item,index){
					if(item.name == self.city){
						self.districtArr = item.sub;
					}
				});
				if(self.districtArr && self.districtArr.length>0){
					self.district = self.districtArr[1].name;
				}else{
					self.district='';
				}
				
			}
		},
		mounted:function(){
			this.updateCity();
			this.updateDistrict();
		}
	})
}