关于联动这一块

同学你好，可以看下面的注释：

/ 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');
}

这段代码主要操作就是选择一个select之后，下一个select会更新data-where记录，下面所有的select会根据当前的选择更新内容。

自己再测试理解下，祝学习愉快！