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

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

主要实现以下功能：

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

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

3、自定义动态显示数据

咨询问题：

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

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

这个可以讨论下

1 /**
2 省市区县级联
3 */
4 (function($){
5
6     /*
7     *
8     *获取ele的相对元素
9     *
10     **/
11     function CssFirstElement(ele, css) {
12         ele = $(ele);
13         if (!ele) {
14             var event = event ? arguments[0] : window.event;
15             ele = event.srcElement ? event.srcElement : event.target;
16             ele = $(ele);
17         }
18         var targetInpage;
19
20         if ((typeof css == 'string') && css.constructor == String && css.substr(0, "css:#".length) == "css:#") {
21             //以css:# 开头，是一个ID选择器
22             targetInpage = $( $(css.substring(4))[0] );
23         } else if ((typeof css == 'string') && css.constructor == String && css.substr(0, "css:".length) == "css:") {
24             //以css: 开头，是一个基于元素的父级元素
25             var css0 = css.substring(4);
26             if (css0.split(' ').length==1) {
27                 var parentCss = css0.substring(0, css0.indexOf(' '));
28                 var eleCss = css0.substring(css0.indexOf(' ')).replace(/(^\s*)|(\s*$)/g, "");
29                 targetInpage = ele.parents(eleCss + ":first");
30             } else {
31                 var parentCss = css0.substring(0, css0.indexOf(' '));
32                 var eleCss = css0.substring(css0.indexOf(' ')).replace(/(^\s*)|(\s*$)/g, "");
33                 targetInpage = ele.parents(parentCss+":first").find(eleCss);
34             }
35
36         } else if ((typeof css == 'string') && css.constructor == String) {
37             targetInpage = $(css);
38         } else {
39             //对象直接返回
40             return [];
41         }
42
43         return targetInpage.length > 0 ? $(targetInpage.get(0)) : [];
44     }
45     function SelectData(element) {
46         this.element = element;//元素
47         this.optionUrl = element.attr("data-optionUrl");//加载选项的url
48         this.defaultValue = element.attr("data-defaultValue");//加载选项试的默认值
49         this.display = element.attr("data-display");//返回对象的 option 显示的键
50         this.value = element.attr("data-value");//返回对象的 option 绑定的键
51         this.changeTarget = CssFirstElement(element, element.attr("data-changeTarget"));//元素选择改变后，触发目标元素重新加载选项
52         this.showAll = element.attr("data-showAll");//是否显示全部选项
53         this.immediately = element.attr("data-immediately");//是否立即加载选项
54         this.param = element.attr("data-param");//请求时携带的参数
55         //有需要触发改变选项的目标，就添加change事件，触发目标请求时，携带的参数
56         if (this.changeTarget.length > 0) {
57             this.element.on("change.selectDataFill",$.proxy(this.changeEvent,this));
58         }
59         this.element.data("SelectDataFillObj",this);
60     }
61     SelectData.prototype = {
62         changeEvent: function () {
63             this.changeTarget.attr("data-param",
64                 this.element.get(0).name + "=" + this.element.get(0).value);
65             this.changeTarget.data("SelectDataFillObj").empty();
66
67             var targetW=this.changeTarget;
68             while (true) {
69                 targetW = targetW.data("SelectDataFillObj").changeTarget;
70                 if (targetW && targetW.length>0) {
71                     targetW.data("SelectDataFillObj").empty();
72                 } else {
73                     break;
74                 }
75             }
76             this.changeTarget.data("SelectDataFillObj").LoadData();
77         },
78         empty: function () {
79             this.element.empty();
80             if (this.showAll) {
81                 $("<option value=\"\">全部</option>").appendTo(this.element);
82             }
83         },
84         FillDataSuccess: function (data) {
85             debugger;
86             var element = this.element;
87             this.empty();
88
89             for (var i = 0; i < data.list.length; i++) {
90                 var item = data.list[i];
91                 $("<option value=\"" + item[this.value] + "\" " +
92                     (item[this.value] == this.defaultValue ? "selected" : "") + ">" +
93                     item[this.display] + "</option>").appendTo(element);
94             }
95             if (this.element.val()!='') {
96                 this.element.trigger("change.selectDataFill");
97             }
98         },
99         LoadData: function () {
100             $.getJSON(this.optionUrl,this.element.attr("data-param")).success($.proxy(this.FillDataSuccess, this));
101         }
102     };
103     $.fn.SelectDataFill = function () {
104
105         this.each(function (index, element) {
106
107             var element = $(element);
108             var obj = new SelectData(element);
109             if (obj.immediately) {
110                 obj.LoadData();
111             }
112
113         });
114
115     }
116
117
118 })(jQuery);

应用：

1 <td colspan="3">
2     <select name="ProvinceId"
3             data-optionUrl="/BasicPlugin/Area/ProvinceJson"
4             data-defaultValue="3"
5             data-display="Name"
6             data-value="Id"
7             data-changeTarget="css:td select[name=CityId]"
8             data-showAll="true"
9             data-immediately="true">
10         <option value="">请选择</option>
11     </select>
12     <select name="CityId"
13             data-optionUrl="/BasicPlugin/Area/CityJson"
14             data-defaultValue="1"
15             data-display="Name"
16             data-value="Id"
17             data-changeTarget="css:td select[name=DistrictId]"
18             data-showAll="true">
19         <option value="">请选择</option>
20     </select>
21     <select name="DistrictId"
22             data-optionUrl="/BasicPlugin/Area/DistrictJson"
23             data-defaultValue="1"
24             data-display="Name"
25             data-value="Id"
26             data-changeTarget="css:td select[name=StreetId]"
27             data-showAll="true">
28         <option value="">请选择</option>
29     </select>
30         <select name="StreetId"
31                 data-optionUrl="/BasicPlugin/Area/StreetJson"
32                 data-defaultValue="1"
33                 data-display="Name"
34                 data-value="Id"
35                 data-showAll="true">
36         <option value="">请选择</option>
37     </select>
38 </td>

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

1 {
2     list:[
3         {ID:1,Name:"名称",Code:"001"},
4         {ID:1,Name:"名称",Code:"001"}
5     ]
6 }

效果如下：



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

暂时公开访问地址可以看到效果：
http://uiprogrammer.sxxxt.cn/Home/Index