knockoutjs select onchange 下拉级联

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中。

 

转载于:https://www.cnblogs.com/ruanyifeng/p/3952685.html