Vue实现省市区三级联动，下拉框，简单易懂

最新推荐文章于 2024-03-04 14:09:24 发布

编程界小明哥

最新推荐文章于 2024-03-04 14:09:24 发布

阅读量8.1k

点赞数 5

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/dkm123456/article/details/111618000

版权

vue 专栏收录该内容

16 篇文章 13 订阅

订阅专栏

效果图：

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="GBK">
        <title></title>
        <style>
        </style>
    </head>
    <body>
    	<div id="app" >
    		<select v-model='prov' @change="changeCity();changeCity1()">
    			<option v-for="(item,i) in items">{{item.name}}</option>
    		</select>
    		
    		-- <select v-model='city' @change="changeCity1">
    			<option v-for="(item,i) in cityArr">{{item.name}}</option>
    		</select>
    		
    		-- <select v-model='city1'>
    			<option v-for="(item,i) in cityArr1">{{item.name}}</option>
    		</select> 
    		
    		<p>您选中的是：{{prov}}-{{city}}-{{city1}}</p>
		</div> 
		
    </body>
 	<script src="vue.js"></script>
 	<script>
 		var id=1;
		new Vue({
		el:'#app',
		data:{
		  prov:'北京',
		  city:'',
		  city1:'',
		  items:[
		  	{name:'北京',
			  	sub:[
			  		{name:'北京市',sub:[{name:'北京市11'},{name:'北京市12'},{name:'北京市13'}]},
			  		{name:'北京市2',sub:[{name:'北京市21'},{name:'北京市22'},{name:'北京市23'}]},
			  	]
			 },
		  	{name:'江西',
			  	sub:[
			  		{name:'南昌市',sub:[{name:'高新区'},{name:'西湖区'},{name:'瑶湖区'}]},
			  		{name:'赣州市',sub:[{name:'赣州市1'},{name:'赣州市2'},{name:'赣州市3'}]},
			  		{name:'抚州市',sub:[{name:'抚州市1'},{name:'抚州市2'},{name:'抚州市3'}]}
			  	]
		  	}
		  ],
		  cityArr:[],
		  cityArr1:[]
		},
		mounted:function(){//执行默认选择
			this.changeCity();
			this.changeCity1();
		},
		methods:{
			changeCity:function(){//省切换
				var me=this;
				var item ;
				me.items.forEach(function(ele){
					if(ele.name===me.prov){//判断与prov是否相等，相等的表示被切换选中的省份
						item = ele;
					}
				})
				if(item){
					this.cityArr=item.sub;//将选中的item的sub设置给cityArr 用于显示市
					this.city=item.sub[0].name;//默认选择第一个市
					
					this.cityArr1=[];
					this.city1='';
				}
			
			},
			changeCity1:function(){//市切换
				var me=this;
				var item ;
				me.cityArr.forEach(function(ele){
					if(ele.name===me.city){//判断与city是否相等，相等的表示被切换选中的市
						item = ele;
					}
				})
				if(item){
					this.cityArr1=item.sub;//将选中的item的sub设置给cityArr1 用于显示区
					this.city1=item.sub[0].name;//默认选择第一个区
				}
			}
		}
	})
 	</script>	
		
</html>

编程界小明哥

关注

5
点赞
踩
37

收藏

觉得还不错? 一键收藏
打赏
10
评论
Vue实现省市区三级联动，下拉框，简单易懂

效果图：代码：<!DOCTYPE html><html> <head> <meta charset="GBK"> <title></title> <style> </style> </head> <body> <div id="app" > <se
复制链接

扫一扫