利用v-model,v-for,select实现三级连锁下拉菜单 省市县选择
HTML
<div id="address"> <label>地址</label> <select id="province" v-model="provinceId" class="form-control"> <option v-for="province in provinces" :value="province.districtId" v-on:click="selectProvince()">{{province.districtName}}</option> </select> <select id="city" v-model="cityId" class="form-control"> <option v-for="city in citys" :value="city.districtId" v-on:click="selectCity()">{{city.districtName}}</option> </select> <select id="county" v-model="countyId" class="form-control"> <option v-for="county in countys" :value="county.districtId">{{county.districtName}}</option> </select> </div>
<script src="../js/productUpload.js" type="text/javascript"></script> <!-- 必须在vue作用的标签之后引用关于vue的js -->
JS
$(function(){ //初始化加载 initAddress(); }) function initAddress() { //加载省份信息 axios.get("http://192.168.1.106:8080/v/address/province") .then(function(response){ var provinces = response.data.data.districts; address.provinces = provinces; }) .catch(function(error){ console.log("error:"+error); }); } var address = new Vue({ el:'#address', data:{ provinceId:"", provinces:"", cityId:"", citys:"", countyId:"", countys:"", }, methods:{ selectProvince: function(){ console.log("provinceId:"+this.provinceId); axios.get("http://192.168.1.106:8080/v/address/city",{ params:{ provinceId: this.provinceId, } }) .then(function(response){ var citys = response.data.data.city; address.citys = citys; // this.citys = citys; //两者区别很大,上者可以实现动态效果,具体原因不明 address.countys = ""; }) .catch(function(error){ console.log("error: "+error); }); }, selectCity:function(){ console.log("cityId:"+this.cityId); axios.get("http://192.168.1.106:8080/v/address/county",{ params:{ cityId: this.cityId, } }) .then(function(response){ var countys = response.data.data.county; address.countys = countys; // this.countys = countys; //两者区别很大,上者可以实现动态效果,具体原因不明 }) .catch(function(error){ console.log("error: "+error); }); }, } });
参考博文:1. https://blog.csdn.net/qq_41802303/article/details/80080101