Vue 一个注册页面有省市联动
var vm = new Vue({ el: '#complete-info', data: { provinceList: [], selectedProvince: "", cityList: [], selectedCity: "", dealerList: [], selectedDealer: "", carTypeInfo: [], selectedCarType: "${carType}", custName:"${customer.custName}" }, watch: { selectedProvince: function (newVal, oldVal) { var _self = this; if (newVal && typeof newVal != "undefined") { $.get("/basedata/area/parent/" + _self.selectedProvince, function (data) { _self.cityList = data; }) } _self.selectedCity = ""; }, selectedCity: function (newVal, oldVal) { var _self = this; if (newVal && typeof newVal != "undefined") { $.get("/basedata/dealer/city/" + newVal, function (data) { _self.dealerList = data; }) } _self.selectedDealer = ""; }, selectedCarType: function (newVal, oldVal) { var _self = this; if (newVal && typeof newVal != "undefined") { $.get("/basedata/states/cartype/"+ _self.selectedCarType, function (data) { _self.provinceList = data; _self.selectedProvince=""; }); } } }, methods: { checkInput: function(){ var _self=this; if(_self.custName=="") return "请填写姓名"; if(_self.selectedProvince=="") return "请选择省市"; if(_self.selectedCity=="") return "请选择市区"; if(_self.selectedDealer=="") return "请选择经销商"; return "ok"; }, submit: function () { var errMsg=this.checkInput(); if(errMsg!="ok"){alert(errMsg); return;} var _self=this; var _cartypes = _self.carTypeInfo .filter(function(t){if(t.chk==true)return t}) .map(function(t2){return t2.code}) .join(); var _state=$("#home_state").find("option:selected").text(); var _city=$("#home_city").find("option:selected").text(); var data = { mobile: "${customer.phone}", name: _self.custName, attentionCarCode:_self.selectedCarType, dealerCode: _self.selectedDealer, recieveInfoCarType: ","+ _cartypes, visitSource: window.location.href, stateCode: _self.selectedProvince, state:_state, cityCode: _self.selectedCity, city: _city, isFromPc: 1, type: 3 }; $.ajax({ url: "/account/order/complete-customer", dataType: "json", data: JSON.stringify(data), contentType:"application/json", type: 'post', success: function (item) { if (item.Code == 1) { window.location.href = '/order/account/activity/false'; } else { alert(item.Msg); } } }); } }, created: function () { var _self = this; $.get("/basedata/cartypeinfo/list", function (data) { _self.carTypeInfo = data; //关注车型 var intentions =${Intentions}; if (intentions) { _self.carTypeInfo.forEach(function (t) { t.chk=false; intentions.forEach(function (t2) { if(t2.carType==t.code) t.chk=true; }) }) } }); } }); //加载完页面设置省 $(function () { $.get("/basedata/states/cartype/${carType}", function (data) { vm.provinceList = data; vm.selectedProvince=${customer.stateCode}; }); });