5-16 uicascading自己捋了一天写的注释希望能帮到有需要的小伙伴

$.fn.UiCascading = function(){
    var ui = $(this); //获取改事件的大盒子
    var selects = $('select',ui); //获取每一个下拉菜单
    selects
    .on('change',function(){  //当每一个下拉菜单变化时触发函数
 
        var val = $(this).val(); //获取当前变化菜单的val值,即下拉框选中的内容文字
 
        var index = selects.index(this); //获取当前元素在selects选择器中的索引
        // 触发下一个select更新，根据当前值
        var where = $(this).attr('data-where'); //获取当前下拉框中的data-where值 
 
         
        //判断获取到的当前data-where是否为空 如果为空则赋值空数组
        //如果不为空，则将获取到的内容按，打断成新数组
        //只有第一个框选择后获取到的data-where为空，因为第一个选完后
        //会对第二个框的data-where重新赋值，赋值为第一个框中所选中的内容
        //麻烦老师加个括号好吗。这个我就研究了半天
        where = (where ? where.split(',') : []); 
 
        // 将选中的内容插入到where的最后
        where.push($(this).val());
 
        selects.eq(index+1)
            .attr('data-where',where.join(','))//将where数组用，连接成字符串然后赋值给下一个下拉框
            .triggerHandler('reloadOptions');//触发这个函数
 
        // 触发下一个之后的select初始化
        // 用一个each循环把后面的都初始化
        // 因为看不懂data.js所以我也不知道为什么data-where为空就初始化
        // 大概好像是有一个初始数组，然后用插入的方法扩容这个数组
        // 如果data-where为空则不扩容 而原始数组的内容分别为
        // var arr = ['医院地区']; arr = ['医院等级'];var arr = ['医院名称'];var arr = ['科室名称'];
        // 就是初始化后所有下拉框需要的内容
        // 好吧其实完全看不懂data.js
        ui.find('select:gt('+(index+1) +')').each(function(){
            $(this).attr('data-where','')
            .triggerHandler('reloadOptions');
        })
    })
    // 清空当前下拉框内容 并且按获得的数据data重新编写改下拉框中的option
    .on('reloadOptions',function(){
        var method = $(this).attr('data-search');//获取当前下拉框的data-search值 
        var args = $(this).attr('data-where').split(',');//将当前的data-where按，分割成数组
 
        //调用当前下拉框data-search值对应的数据函数
        //用apply的方法将数据函数中的this替换成当前事件触发的this，并将args作为参数传入数据函数中
        //将数据函数得到的返回值赋值给data，此时data就是改框需要插入的内容
        //具体怎么样我也没搞太明白 可以自己去w3c看看
        //不明白可以console出来看
        var data = AjaxRemoteGetData[ method ].apply(this,args);
 
        //获取当前事件触发的函数
        var select = $(this);
        //在当前函数中找到option并清空内容
        select.find('option').remove();
 
 
        // 这个是json循环 没学到的东西
        // i表示当前数据在json中的索引 item表示内容 不清楚的可以console出来
        // 虽然这里的data好像是json数据 但是在这里当成数组用for循环可以
        // $.each(data , function(i,item){
        //     var el = $('<option value="'+item+'">'+item+'</option>');
        //     select.append(el);
        // });
 
 
        // 用for循环也可以达到同样的效果并且更容易理解
        // 实在想不通老师为什么要用没学过的东西写
        // 搞得我捋了一整天
        for(var i=0;i<data.length;i++){
            var el = $('<option value="'+data[i]+'">'+data[i]+'</option>');
            select.append(el);
        }
    });
 
 
    // 初始状态下自动写入第一个下拉栏数据
    $('select').eq(0).triggerHandler('reloadOptions');
}

顺便提下建议，能不能尽量少用没学过的知识，真的超难理解。。。

蓝小胖子 2018-05-29

源自：实战：挂号平台首页 5-10 首页.UI组件-UiCascading（下）

收起

2回答

慕妹7541221 2018-08-27 12:43:03

where = (where ? where.split(',') : []);

这个是什么意思。我试了几次当where 初始化的时候是一个数组，系统报错，也就是 where？为true的时候。

收起回答

妮可妮可妮_ #1

这个为三元运算, 语法为：条件表达式？表达式1：表达式2。用法:问号前面的位置是判断的条件，判断结果为bool型，为true时调用表达式1，为false时调用表达式2。因为这个同学的问答已经是2018年5月29号的了,很有可能存在没有看到被忽略的情况,建议同学在这种时候新建问答进行提问,助教老师和热心的同学会为你答疑解惑的~ 祝学习愉快!

2018-08-27 16:24:42

好帮手慕糖 2018-05-30 11:11:31

棒棒的，相信这么捋一捋代码，可以更好的理解，在自己学习的同时也可以帮助他人，很棒哦，另：关于each方法，如下，可以参考教辅资料。知识学习贯穿整个路径学习，如视频、教辅、案例等。若还是有哪里不理解可以在问答区进行提问，助教老师会积极帮助你解决。

祝学习愉快~

收起回答

挪威_ #1

在这个同学基础上稍微补充了点，这几段代码看懂理解就很容易明白老师课程的逻辑了 var method = $(this).attr("data-search");//获取接口路径 var arg = $(this).attr("data-where").split(",");//获取接口传来的值，通过split(",")方法分割成一个字符串数组【实在是不理解保存什么值，用console.log('arg', arg)，然后四个选项点点就知道传入了什么值】; var data = AjaxRemoteGetData[method].apply(this, arg);／／【这段语句看懂的前提是要知道js对象，包括data.js中，要掌握访问对象方法属性，和往对象添加等方法，这个知识点不知道代码是不可能理解的】 AjaxRemoteGetData[method]表示找到了method（data-search）,在对象AjaxRemoteGetData的值，然后通过apply（）把arg，也就是数组的值传入并调用，最终可以获取的是当前选项后的联动数据，比如选择地区后，医院等级等会跟着联动

2020-02-21 04:36:43