实现二级联动,选择一个城市,下个选择框中会出现选择了的城市里面的地区,如下
下面这段写在js文件中methods的外面不要与selectChange平级
html中的代码
这是选择地区
<div class="aa">
<select v-model="address.addressid"
@change="selectChange(address.addressid)">
<option value="" >--请选择地区--</option>
<option v-for="item in options" v-bind:value="item.id">{{item.addressname}}</option>
</select>
</div>
</div>
根据选择的地区选择子地区
<div class="bb">
<div >子地区</div>
<select v-model="address.addreid">
<option value="" >--请选择子地区--</option>
<option v-for="item in addrenameList" v-bind:value="item.id">{{item.addrename}}</option>
</select>
</div>
</div>
在js中写入
在data中写入
address: {},
options:[]
在js中写入
得到地区的列表
getaddressnameList: function() {
$.get("../address/addressList", function(r){
vm.options = r.addressList;
});
}
根据地区得到子地区列表
selectChange: function(val) {
vm.getZidiquList(val);
},
getZidiquList: function(val) {
if (val != null && val != '') {
$.get("../aaa/addreListByaddressid/" + val, function(r){ //这里写根据地区的id得到这个地区的子地区的列表的路径
vm.addrenameList = r.addreListByaddressid;
});
}
}
下面这段写在js文件中methods的外面不要与selectChange平级
created: function() {
this.getaddressnameList();
}