knockoutjs select onchange 下拉级联

时间:2024-11-08 18:35:07

1.绑定数据源

 <select name="" class="xlb02"
data-bind="options: $root.dataSource.ProvinceList,value:province, optionsText:'text', optionsValue:'value', optionsCaption: '请选择...'"></select>
<select name="" class="xlb02" data-bind="options:citys,value:city, optionsText:'text', optionsValue:'value', optionsCaption: '请选择...'"></select>

2.订阅下拉值得变化函数

//订阅省市变化函数
com.cascade(self.myForm.address().province, self.myForm.address().citys, self.dataSource.ListCity); /**
* 说明: 下拉列表的级联
* 参数: val:订阅的变化值,list:返回的结果集合,source:对比的数据源
**/
com.cascade = function (val,list,source) {
//订阅市区变化函数
val.subscribe(function (newValue) {
list.removeAll();
$.each(source, function (i, e) {
if (e.ParentCityID == newValue) {
list.push({ value: e.value, text: e.text });
}
});
});
};

当省得下拉后的值province发生变化时,循环遍历城市集合,匹配父级ID的城市集合push到结果集合,返回绑定到城市下拉select中。