2回答

好帮手慕言

2020-06-18

同学你好，关于同学的疑问，解答如下：

1、理解的是对的，是对数据进行处理。

2、多级联动的核心思路就是： 选择一个select之后，下一个select会更新data-where记录，下面所有的select会根据当前的选择更新内容。如下：

// ui-cascading
$.fn.UiCascading = function() {
    var ui = $(this);
    // 获取所有下拉列表元素
    var selects = $('select', ui);

    //给所有下拉列表绑定改变事件
    selects
        .on('change', function() {
            // 获取当前列表选中的值,例如'朝阳区'
            var val = $(this).val();
            // 获取当前select的索引

            var index = selects.index(this);

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

            // 获取当前下拉列表的data-where属性值
            var where = $(this).attr('data-where');

            // 判断data-where属性是否有值，如果有就分隔，没有赋值为[]
            where = where ? where.split(',') : [];
            // 在属性值中添加当前下拉列表选择的值
            where.push($(this).val());

            // 更新当前的下一个列表data-where属性值
            selects.eq(index + 1)
                .attr('data-where', where.join(','))
                .triggerHandler('reloadOptions');
            //	触发下一个之后的所有 select  的初始化（清除不应该的数据项）
            ui.find('select:gt(' + (index + 1) + ')').each(function() {
                $(this)
                    .attr('data-where', '')
                    .triggerHandler('reloadOptions');
            })


        })
        // 绑定自定义reloadOptions事件
        .on('reloadOptions', function() {
            // 获取select的data-search属性值
            var method = $(this).attr('data-search');
            // 获取select的data-where属性值并分隔为字符串
            var args = $(this).attr('data-where').split(',');
            // 从通过字符串参数从data.js文件中获取数据
            var data = AjaxRemoteGetData[method].apply(this, args);
            var select = $(this);
            // 将原有的option移除
            select.find('option').remove();
            // 将获取的指定数据遍历，和option标签拼接，重新添加到select中
            $.each(data, function(i, item) {
                var el = $('<option value="' + item + '">' + item + '</option>');
                select.append(el);
            });
        });
    // 默认第一个的select触发更新事件

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

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

0

宝慕林4466778

提问者

2020-06-18

还有个问题就是。。。。请老师帮我纠正一下。。。。

老师这里做的其实就是模仿ajax从后台调数据的一个过程，，，

所以看第一眼的时候有一些复杂 毕竟是模仿的  看不太明白。。。。

整理了下 大概是：

把调到的area 数据放再第一个select 里面 

然后当第一个select 的里面的值改变的时候

清空下面所有的select 俩面的值 依次类推？

是这样理解嘛？

0