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

向右看齐 2021-07-25 02:05 681阅读 0赞

效果图：

![20201224120116400.png][]

代码：

<!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>

[20201224120116400.png]: /images/20210724/efa5d88775f84a9b9dd5d33572b757e3.png