Vue實現三級聯動
Html部分：
<div class="form-group">
<div class="col-sm-2 control-label">省<span style="color:red;">*</span></div>
<div class="col-sm-10">
<!-- <input type="text" class="form-control" v-model="businessUser.province" placeholder="省"/> -->
<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<province;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的聯動後面會更新