zoukankan      html  css  js  c++  java
  • 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中。

  • 相关阅读:
    vue2查看大图vue-preview使用笔记
    promise使用场景
    vue2移动端使用vee-validate进行表单验证
    移动端单位换算理解
    ...
    我的promise学习笔记
    前端本地调试解决跨域的两种方法
    vue2 零星笔记
    vue2.x使用百度地图
    BZOJ 3368 约翰看山(扫描)O(N)
  • 原文地址:https://www.cnblogs.com/ruanyifeng/p/3952685.html
Copyright © 2011-2022 走看看