Vue完成三级联动 地址联动
Vue实现三级联动
Html部分：
<div class="form-group">
<div class="col-sm-2 control-label">省<span style="color:red;">*span>div>
<div class="col-sm-10">
<select id="province" class="form-control" @change="findCity()" v-model="addrId" >
<option class="default" v-for="addr in address" v-bind:value="addr.id">{{addr.name}}option>
select>
div>
div>
<div class="form-group">
<div class="col-sm-2 control-label">市<span style="color:red;">*span>div>
<div class="col-sm-10">
<select id="city" class="form-control" @change="findDistrict" v-model="citysId">
<option class="default" v-for="city in citys" v-bind:value="city.id">{{city.name}}option>
select>
div>
div>
<div class="form-group">
<div class="col-sm-2 control-label">区div>
<div class="col-sm-10">
<select id="district" class="form-control" @change="setDistrict" v-model="districtsId">
<option class="default" v-for="district in districts" v-bind:value="district.id">{{district.name}}option>
select>
div>
div>
js部分：每点击一个地区进行赋值
数据：
addrId:null,
// 前三个用于回显
citysId:null,
districtsId: null,
//这三个用于展示下拉框
address:{},
citys:{},
districts:{},
dept:{
}
//查询所有的省
findproven: function(){
$.ajax({
type: "POST",
url: baseURL + "syscompany/findAddress",
data: {id:null},
dataType: "json",
success: function(r){
vm.address=r.sysArea;
}
});
},//省触发事件，查询市
findCity: function(value){
vm.dept.province = $("#province option:selected").text();
console.log($("#province option:selected").text());
$.ajax({
type: "POST",
url: baseURL + "syscompany/findAddress",
data: {id:vm.addrId},
dataType: "json",
success: function(r){
vm.citys=r.sysArea;
}
});
},
//市触发事件，查询县区
findDistrict: function(){
vm.dept.city = $("#city option:selected").text();
console.log($("#city option:selected").text());
var data="id="+vm.citys.id;
$.ajax({
type: "POST",
url: baseURL + "syscompany/findAddress",
data: {id:vm.citysId},
dataType: "json",
success: function(r){
vm.districts=r.sysArea;
}
});
},
//县区触发事件，设置县区的值
setDistrict: function(){
vm.dept.area = $("#district option:selected").text();
console.log(vm.dept.area);
},
通过查询出来的数据循环比较进行赋值从而回显
getInfo: function(id){
$.get(baseURL + "sys/dept/info/"+id, function(r){
$.get(baseURL + "sys/dept/info/"+vm.dept.deptId, function(r){
vm.dept = r.dept;
vm.getDept();
});
var province=$("#province option").length;
for(var i=0;i
if($("#province").get(0).options[i].text == vm.dept.province){
vm.addrId = $("#province").get(0).options[i].value;
$.ajax({
type: "POST",
url: baseURL + "syscompany/findAddress",
data: {id:vm.addrId},
dataType: "json",
success: function(r){
vm.citys=r.sysArea;
for(var i = 0; i < vm.citys.length;i++){//遍历市
if(vm.citys[i].name == vm.dept.city){
vm.citysId = vm.citys[i].id;
$.ajax({
type: "POST",
url: baseURL + "syscompany/findAddress",
data: {id:vm.citysId},
dataType: "json",
success: function(r){
vm.districts=r.sysArea;
console.log(vm.districts);
for(var i = 0; i < vm.districts.length;i++){//遍历区
if(vm.districts[i].name == vm.dept.area){
vm.districtsId = vm.districts[i].id;
break;
}
}
}
});
break;
}
}
}
});
break;
}
}
});
},
这种方法回显比较麻烦，可以集合layui联动会更加方便，layui+vue的联动后面会更新