夜深了，写了个JQuery的省市区三级级联效果

刚刚练手的JQuery，希望大神们指正

主要实现以下功能：

1、三级菜单级联加载数据

2、可以在不操作脚本的情况下，给元素加属性实现级联功能

3、自定义动态显示数据

咨询问题：

对于一般比较固定不变的数据，是不是应该生成静态的文件，直接加载整个数据文件，访问文件比较好？还是这样动态的访问比较好？

一般的数据文件，小的会在50k，大的会在3M

这个可以讨论下

/**
省市区县级联
*/
(function($){
    
    /*
    *
    *获取ele的相对元素
    *
    **/
    function CssFirstElement(ele, css) {
        ele = $(ele);
        if (!ele) {
            var event = event ? arguments[0] : window.event;
            ele = event.srcElement ? event.srcElement : event.target;
            ele = $(ele);
        }
        var targetInpage;

        if ((typeof css == 'string') && css.constructor == String && css.substr(0, "css:#".length) == "css:#") {
            //以css:# 开头，是一个ID选择器
            targetInpage = $( $(css.substring(4))[0] );
        } else if ((typeof css == 'string') && css.constructor == String && css.substr(0, "css:".length) == "css:") {
            //以css: 开头，是一个基于元素的父级元素
            var css0 = css.substring(4);
            if (css0.split(' ').length==1) {
                var parentCss = css0.substring(0, css0.indexOf(' '));
                var eleCss = css0.substring(css0.indexOf(' ')).replace(/(^s*)|(s*$)/g, "");
                targetInpage = ele.parents(eleCss + ":first");
            } else {
                var parentCss = css0.substring(0, css0.indexOf(' '));
                var eleCss = css0.substring(css0.indexOf(' ')).replace(/(^s*)|(s*$)/g, "");
                targetInpage = ele.parents(parentCss+":first").find(eleCss);
            }
                 
        } else if ((typeof css == 'string') && css.constructor == String) {
            targetInpage = $(css);
        } else {
            //对象直接返回
            return [];
        }

        return targetInpage.length > 0 ? $(targetInpage.get(0)) : [];
    }
    function SelectData(element) {
        this.element = element;//元素
        this.optionUrl = element.attr("data-optionUrl");//加载选项的url
        this.defaultValue = element.attr("data-defaultValue");//加载选项试的默认值
        this.display = element.attr("data-display");//返回对象的 option 显示的键
        this.value = element.attr("data-value");//返回对象的 option 绑定的键
        this.changeTarget = CssFirstElement(element, element.attr("data-changeTarget"));//元素选择改变后，触发目标元素重新加载选项
        this.showAll = element.attr("data-showAll");//是否显示全部选项
        this.immediately = element.attr("data-immediately");//是否立即加载选项
        this.param = element.attr("data-param");//请求时携带的参数
        //有需要触发改变选项的目标，就添加change事件，触发目标请求时，携带的参数
        if (this.changeTarget.length > 0) {
            this.element.on("change.selectDataFill",$.proxy(this.changeEvent,this));
        }
        this.element.data("SelectDataFillObj",this);
    }
    SelectData.prototype = {
        changeEvent: function () {
            this.changeTarget.attr("data-param",
                this.element.get(0).name + "=" + this.element.get(0).value);
            this.changeTarget.data("SelectDataFillObj").empty();
            
            var targetW=this.changeTarget;
            while (true) {
                targetW = targetW.data("SelectDataFillObj").changeTarget;
                if (targetW && targetW.length>0) {
                    targetW.data("SelectDataFillObj").empty();
                } else {
                    break;
                }
            }
            this.changeTarget.data("SelectDataFillObj").LoadData();
        },
        empty: function () {
            this.element.empty();
            if (this.showAll) {
                $("<option value="">全部</option>").appendTo(this.element);
            }
        },
        FillDataSuccess: function (data) {
            debugger;
            var element = this.element;
            this.empty();
           
            for (var i = 0; i < data.list.length; i++) {
                var item = data.list[i];
                $("<option value="" + item[this.value] + "" " +
                    (item[this.value] == this.defaultValue ? "selected" : "") + ">" +
                    item[this.display] + "</option>").appendTo(element);
            }
            if (this.element.val()!='') {
                this.element.trigger("change.selectDataFill");
            }
        },
        LoadData: function () {
            $.getJSON(this.optionUrl,this.element.attr("data-param")).success($.proxy(this.FillDataSuccess, this));
        }
    };
    $.fn.SelectDataFill = function () {
    
        this.each(function (index, element) {

            var element = $(element);
            var obj = new SelectData(element);            
            if (obj.immediately) {
                obj.LoadData();
            }
            
        });

    }


})(jQuery);

应用：

<td colspan="3">
    <select name="ProvinceId" 
            data-optionUrl="/BasicPlugin/Area/ProvinceJson" 
            data-defaultValue="3" 
            data-display="Name" 
            data-value="Id" 
            data-changeTarget="css:td select[name=CityId]" 
            data-showAll="true" 
            data-immediately="true">
        <option value="">请选择</option>    
    </select>
    <select name="CityId" 
            data-optionUrl="/BasicPlugin/Area/CityJson" 
            data-defaultValue="1" 
            data-display="Name" 
            data-value="Id" 
            data-changeTarget="css:td select[name=DistrictId]" 
            data-showAll="true"> 
        <option value="">请选择</option>                                                  
    </select>
    <select name="DistrictId" 
            data-optionUrl="/BasicPlugin/Area/DistrictJson" 
            data-defaultValue="1" 
            data-display="Name" 
            data-value="Id" 
            data-changeTarget="css:td select[name=StreetId]" 
            data-showAll="true">  
        <option value="">请选择</option>                                                     
    </select>
        <select name="StreetId" 
                data-optionUrl="/BasicPlugin/Area/StreetJson" 
                data-defaultValue="1" 
                data-display="Name" 
                data-value="Id" 
                data-showAll="true">  
        <option value="">请选择</option>                                                     
    </select>
</td> 

以上代码中的请求路径，如  /BasicPlugin/Area/StreetJson 返回的json格式为：

{
    list:[
        {ID:1,Name:"名称",Code:"001"},
        {ID:1,Name:"名称",Code:"001"}
    ]  
}

效果如下：

一级选择改变，相关联的均重新加载数据，如果加载项中有默认值，则会选中默认值

 暂时公开访问地址可以看到效果：

http://uiprogrammer.sxxxt.cn/Home/Index