夜深了，寫了個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