请教一个jQuery的问题

来源：5-10 首页.UI组件-UiCascading（下）

weixin_慕的地5241954

2019-10-10 00:58:33

$.fn.UiCascading = function(){
    var ui = $(this);
    var selects = $('select',ui);

    selects
    .on('change',function(){
        var val = $(this).val();
        // console.log(val) 获取当前selects的值，如朝阳区，下面是当前selects的索引
        var index = selects.index(this);
        //  根据当前的值，触发下一个 select 的更新
        var where = $(this).attr('data-where');
        where = where ? where.split(',') : [];
        where.push( val );
        // 下面是当前select选中后，后面一项数据的更新
        selects.eq(index+1)
            .attr('data-where',where.join(',')) // join把数组转成字符串
            .triggerHandler('reloadOptions');
        // 触发下一个之后的所有select的初始化（清除不应该的数据项）
        // ui.find()方法这里的语法是先找出当前的select，然后把后面所有的select找出来并选中，然后把所有选中的select的'data-where'属性清空，再执行'reloadOptions'更新数据方法，因为find方法找到的是数组，所以要用each方法遍历每一项清除
        ui.find('select:gt('+ (index+1) +')').each(function(){
            $(this)
            .attr('data-where','')
            .triggerHandler('reloadOptions');
        })
            

    }) 
    .on('reloadOptions',function(){
    //  reloadOptions方法是触发下一个之后的 select  的初始化（清除不应该的数据项）
        var method = $(this).attr('data-search'); 
        //method知道当前的接口是哪个
        var args = $(this).attr('data-where').split(',');
        // 这里是把当前'data-where'的数据用split方法拆成数组
        var data = AjaxRemoteGetData[ method ].apply( this, args );
        // 向data.js中的AjaxRemoteGetData对象通过method接口拿数据，然后用apply方法向当前对象传args数组，配合split方法使用
        var select = $(this);
        // 把select自己拿到
        select.find('option').remove();
        // 把当前的select中的所有option项清除
        // 下面是遍历数据data，然后为清空的select添加数据
        $.each( data , function(i,item){
            // debugger 获取当前函数传入的参数，配合arguments使用
            var el = $('<option value="'+item+'">'+item+'</option>');
            select.append(el);
            // 添加数据
        });
    });
    // 默认第一个元素执行更新
    selects.eq(0).triggerHandler('reloadOptions');
}

1、看看我理解的对不对？

2、根据当前的值，触发下一个 select 的更新，怎么触发更新的，能结合代码详细说一下吗？对

where和selects.eq(index+1)这两个地方不理解

var val = $(this).val();

// console.log(val) 获取当前selects的值，如朝阳区，下面是当前selects的索引

var index = selects.index(this);

// 根据当前的值，触发下一个 select 的更新

var where = $(this).attr('data-where');

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

where.push( val );

// 下面是当前select选中后，后面一项数据的更新

selects.eq(index+1)

.attr('data-where',where.join(',')) // join把数组转成字符串

.triggerHandler('reloadOptions');

写回答

2回答

好帮手慕星星

2019-10-11

已采纳

你好，

1、gt(index+1)是不包括索引1的，因为gt方法匹配所有大于给定索引值的元素。并且前面索引1已经重新加载过了：

2、老师在代码中给你添加下注释，可以参考一下哦：

// ui-cascading
$.fn.UiCascading = function() {
    var ui = $(this);
    var selects = $('select', ui);

    selects
        .on('change', function() {
            var val = $(this).val();
            var index = selects.index(this);

            //  触发下一个 select 的更新，根据当前的值
            // 获取当前select的data-where属性值，开始值为空字符串
            var where = $(this).attr('data-where');
            // 三目运算符判断where是否有值，如果有，将字符串分割成数组，如果没有为空数组
            where = where ? where.split(',') : [];
            // 将当前选择的select项放进数组中
            where.push($(this).val());
            // 选择下一个select,
            selects.eq(index + 1)
                //设置data-where属性值为where值(数组拼接成字符串).例如第一个select选择的是朝阳区,那么这里data-where属性值就是朝阳区
                .attr('data-where', where.join(','))
                //调用reloadOptions事件
                .triggerHandler('reloadOptions');

            //  触发下一个之后的 select  的初始化（清除不应该的数据项）
            ui.find('select:gt(' + (index + 1) + ')').each(function() {
                // 将下一个之后的所有select的data-where属性值清空
                $(this)
                    .attr('data-where', '')
                    // 调用reloadOptions事件
                    .triggerHandler('reloadOptions');

            })


        })
        .on('reloadOptions', function() {
            // 获取当前select的data-search属性值
            var method = $(this).attr('data-search');
            // 获取当前select的data-where属性值,并分割成数组

            var args = $(this).attr('data-where').split(',');
            // 通过获取到的data-search属性值以及data-where属性值（筛选条件，例如朝阳区）,从data.js中获取相应的数据
            var data = AjaxRemoteGetData[method].apply(this, args);
            var select = $(this);
            // 将原来的option选项移除
            select.find('option').remove();
            // 将数据进行遍历，将每一项数据进行标签拼接，添加到select中
            $.each(data, function(i, item) {
                var el = $('<option value="' + item + '">' + item + '</option>');
                select.append(el);
            });
        });

    selects.eq(0).triggerHandler('reloadOptions');
}

祝学习愉快！