实现二级联动

实现二级联动，选择一个城市，下个选择框中会出现选择了的城市里面的地区，如下

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();
	}