例子:
HTML:
<select ms-duplex="province_id" ms-change="getCitysByProvinceId(this)">
<option value="0">请选择省份</option>
<option ms-repeat="provinces" ms-attr-value="el.id">{{el.name}}</option>
</select>
<select ms-duplex="city_id">
<option value="0">请选择城市</option>
<option ms-repeat="citys" ms-attr-value="el.id" data-repeat-rendered='citysRendered'>{{el.name}}</option>
</select>
JavaScript:
var vm = avalon.define({
$id : "table",
AreaParentId : 88, //初始化省份ID
AreaId : 8888, //初始化城市ID
provinces : [], //省份资料
province_id : 0, //省份ID
citys : [], //城市资料
city_id : 0, //城市ID
//获取所有省份资料
getAllProvinces : function(){
post('/baidu/getAllProvinces', {} ,function(json){
if(json.result){
vm.provinces = json.data;
vm.province_id=json.data[0]['id'];
}
})
},
//按省份ID获取所有城市
getCitysByProvinceId : function(){
post('/baidu/getCitysByProvinceId', {id:vm.province_id} ,function(json){
if(json.result){
vm.city_rendered = false;
vm.citys = json.data;
}
})
},
citysRendered : function(action, offset, length){
if(vm.province_id == vm.baseinfo.AreaParentId){
//选择的省份与初始化省份相同,使用初始化城市ID
vm.city_id=vm.baseinfo.AreaId;
} else{
//否则,使用提示性option
vm.city_id=0;
}
},
realod: function(){
vm.province_id = vm.AreaParentId;
vm.city_id=vm.AreaId;
},
});
avalon.scan();
//监听省份ID,获取城市资料
vm.$watch('province_id', function(newValue, oldValue){
vm.getCitysByProvinceId();
});
vm.init();
vm.realod();