碼上快樂

相關內容    簡體    繁體

city-picker插件使用-移動h5三級聯動

本文轉載自   查看原文   2017-04-07 12:13   18620 

首先訪問該鏈接：http://www.jq22.com/jquery-info12914

看看是否是你要找的三級聯動插件，(主要看注釋的部分！)

好了，不知道是不是我傻，沒有找到初始化數據的方法，本人只能直接格式化一下代碼，直接改源碼，總之呢，三個地方要改動，看源碼：

修改：city-picker.min.js

  1 // jshint ignore: start
  2 +
  3 function(e) {
  4     //開發時，直接把數據庫數據設置給rawCitiesData，注意，這里要轉json對象，不是json字符串。
  5     e.rawCitiesData = [{//全國的數據太長，只能先放一個北京
  6         name: "北京",
  7         code: "110000",
  8         sub: [{
  9             name: "北京市",
 10             code: "110000",
 11             sub: [{
 12                 name: "東城區",
 13                 code: "110101"
 14             }]
 15         }]
 16     }] 
 17 } ($),
 18 +
 19 function(e) {
 20     "use strict";
 21     var n, a = e.rawCitiesData,
 22     c = function(e) {
 23         for (var n = [], a = 0; a < e.length; a++) {
 24             var c = e[a];
 25             //注意，這里過濾條件，比如：北京是的二級是市轄區，如果不把'市轄區'這個條件去掉，那么，市轄區下的所有數據就沒有了。
 26             /^請選擇|市轄區/.test(c.name) || n.push(c)
 27         }
 28         return n.length ? n: []
 29     },
 30     o = function(e) {
 31         return e.sub ? c(e.sub) : [{
 32             name: "",
 33             code: e.code
 34         }]
 35     },
 36     m = function(e) {
 37         for (var n = 0; n < a.length; n++) if (a[n].code === e || a[n].name === e) return o(a[n]);
 38         return []
 39     },
 40     d = function(e, n) {
 41         for (var c = 0; c < a.length; c++) if (a[c].code === e || a[c].name === e) for (var m = 0; m < a[c].sub.length; m++) if (a[c].sub[m].code === n || a[c].sub[m].name === n) return o(a[c].sub[m])
 42     },
 43     u = function(e) {
 44         var n, c, o = a[0],
 45         m = e.split(" ");
 46         return a.map(function(e) {
 47             e.name === m[0] && (o = e)
 48         }),
 49         o.sub.map(function(e) {
 50             e.name === m[1] && (n = e)
 51         }),
 52         m[2] && n.sub.map(function(e) {
 53             e.name === m[2] && (c = e)
 54         }),
 55         c ? [o.code, n.code, c.code] : [o.code, n.code]
 56     };
 57     e.fn.cityPicker = function(c) {
 58         return c = e.extend({},
 59         n, c),
 60         this.each(function() {
 61             var n = this,
 62             s = a.map(function(e) {
 63                 return e.name
 64             }),
 65             b = a.map(function(e) {
 66                 return e.code
 67             }),
 68             t = o(a[0]),
 69             r = t.map(function(e) {
 70                 return e.name
 71             }),
 72             i = t.map(function(e) {
 73                 return e.code
 74             }),
 75             l = o(a[0].sub[0]),
 76             f = l.map(function(e) {
 77                 return e.name
 78             }),
 79             p = l.map(function(e) {
 80                 return e.code
 81             }),
 82             v = s[0],
 83             h = r[0],
 84             V = f[0],
 85             y = [{
 86                 displayValues: s,
 87                 values: b,
 88                 cssClass: "col-province"
 89             },
 90             {
 91                 displayValues: r,
 92                 values: i,
 93                 cssClass: "col-city"
 94             }];
 95             c.showDistrict && y.push({
 96                 values: p,
 97                 displayValues: f,
 98                 cssClass: "col-district"
 99             });
100             var g = {
101                 cssClass: "city-picker",
102                 rotateEffect: !1,
103                 formatValue: function(e, n, a) {
104                     return a.join(" ")
105                 },
106                 onChange: function(a, o, u) {
107                     var s, b = a.cols[0].displayValue;
108                     if (b !== v) {
109                         var t = m(b);
110                         s = t[0].name;
111                         var r = d(b, s);
112                         return a.cols[1].replaceValues(t.map(function(e) {
113                             return e.code
114                         }), t.map(function(e) {
115                             return e.name
116                         })),
117                         c.showDistrict && a.cols[2].replaceValues(r.map(function(e) {
118                             return e.code
119                         }), r.map(function(e) {
120                             return e.name
121                         })),
122                         v = b,
123                         h = s,
124                         a.updateValue(),
125                         !1
126                     }
127                     if (c.showDistrict && (s = a.cols[1].displayValue, s !== h)) {
128                         var i = d(b, s);
129                         return a.cols[2].replaceValues(i.map(function(e) {
130                             return e.code
131                         }), i.map(function(e) {
132                             return e.name
133                         })),
134                         h = s,
135                         a.updateValue(),
136                         !1
137                     }
138                     e(n).attr("data-code", o[o.length - 1]),
139                     e(n).attr("data-codes", o.join(",")),
140                     c.onChange && c.onChange.call(n, a, o, u)
141                 },
142                 cols: y
143             };
144             if (this) {
145                 var C = e.extend({},
146                 c, g),
147                 w = e(this).val();
148                 //注意，這里是默認顯示第一個省的三級聯動，而且是必須的，如果匹配不到，會報錯二級聯動沒有被定義（坑！）
149                 //這個'北京 北京市 東城區'條件改成：自己數據庫中的第一個省的三級聯動名稱即可，比如你想要把北京顯示在默認上（當然，最好是json數組對象的第一個省）
150                 //替換下面的判斷條件：北京市 市轄區 東城區(判斷條件要與你數據一致，不然回會報錯,並且，默認顯示的條件也要與動態的數據一致)
151                 if (w || (w = "北京市 市轄區 東城區"), v = w.split(" ")[0], h = w.split(" ")[1], V = w.split(" ")[2], w) {
152                     if (C.value = u(w), C.value[0]) {
153                         var D = m(C.value[0]);
154                         C.cols[1].values = D.map(function(e) {
155                             return e.code
156                         }),
157                         C.cols[1].displayValues = D.map(function(e) {
158                             return e.name
159                         })
160                     }
161                     if (C.value[1]) {
162                         if (c.showDistrict) {
163                             var k = d(C.value[0], C.value[1]);
164                             C.cols[2].values = k.map(function(e) {
165                                 return e.code
166                             }),
167                             C.cols[2].displayValues = k.map(function(e) {
168                                 return e.name
169                             })
170                         }
171                     } else if (c.showDistrict) {
172                         var k = d(C.value[0], C.cols[1].values[0]);
173                         C.cols[2].values = k.map(function(e) {
174                             return e.code
175                         }),
176                         C.cols[2].displayValues = k.map(function(e) {
177                             return e.name
178                         })
179                     }
180                 }
181                 e(this).picker(C)
182             }
183         })
184     },
185     n = e.fn.cityPicker.prototype.defaults = {
186         showDistrict: !0
187     }
188 } ($);

初始化HTML頁面：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <link rel="stylesheet" type="text/css" href="jquery-weui.min.css" />
 7     <style>
 8         #city-picker{
 9             margin-left: 40%;
10             margin-right: 20%;
11             margin-top: 20%;
12             width: 200px;
13             height: 40px;
14         }
15     </style>
16 </head>
17 <body>
18 
19 <input type='text' id='city-picker' placeholder='請選擇省市區縣' />
20 <script src="jquery.min.js"></script>
21 <script type="text/javascript" src="jquery-weui.min.js"></script>
22 <script type="text/javascript" src="city-picker.min.js"></script>
23 <script>
24     $("#city-picker").cityPicker({
25         title: "選擇省市區/縣",
26         onChange: function (picker, values, displayValues) {//選擇后觸發的事件
27             console.log(values, displayValues);
28         }
29     });
30 </script>
31 </body>
32 </html>

問題來了，插件怎么回顯呢：

笨辦法一個，現在隱藏域把回顯的數據顯示在下拉上，這一步主要給用戶看到一個同步的效果，然后改js：第一步的js還需要改動：

修改后的：

  1 // jshint ignore: start
  2 +
  3 function(e) {
  4     //開發時，直接把數據庫數據設置給rawCitiesData，注意，這里要轉json對象，不是json字符串。
  5     e.rawCitiesData = [{
  6         name: "北京",
  7         code: "110000",
  8         sub: [{
  9             name: "北京市",
 10             code: "110000",
 11             sub: [{
 12                 name: "東城區",
 13                 code: "110101"
 14             }]
 15         }]
 16     }]
 17 } ($),
 18 +
 19 function(e) {
 20     "use strict";
 21     var n, a = e.rawCitiesData,
 22     c = function(e) {
 23         for (var n = [], a = 0; a < e.length; a++) {
 24             var c = e[a];
 25             //注意，這里過濾條件，比如：北京是的二級是市轄區，如果不把'市轄區'這個條件去掉，那么，市轄區下的所有去就沒有了。
 26             /^請選擇|市轄區/.test(c.name) || n.push(c)
 27         }
 28         return n.length ? n: []
 29     },
 30     o = function(e) {
 31         return e.sub ? c(e.sub) : [{
 32             name: "",
 33             code: e.code
 34         }]
 35     },
 36     m = function(e) {
 37         for (var n = 0; n < a.length; n++) if (a[n].code === e || a[n].name === e) return o(a[n]);
 38         return []
 39     },
 40     d = function(e, n) {
 41         for (var c = 0; c < a.length; c++) if (a[c].code === e || a[c].name === e) for (var m = 0; m < a[c].sub.length; m++) if (a[c].sub[m].code === n || a[c].sub[m].name === n) return o(a[c].sub[m])
 42     },
 43     u = function(e) {
 44         var n, c, o = a[0],
 45         m = e.split(" ");
 46         return a.map(function(e) {
 47             e.name === m[0] && (o = e)
 48         }),
 49         o.sub.map(function(e) {
 50             e.name === m[1] && (n = e)
 51         }),
 52         m[2] && n.sub.map(function(e) {
 53             e.name === m[2] && (c = e)
 54         }),
 55         c ? [o.code, n.code, c.code] : [o.code, n.code]
 56     };
 57     e.fn.cityPicker = function(c) {
 58         return c = e.extend({},
 59         n, c),
 60         this.each(function() {
 61             var n = this,
 62             s = a.map(function(e) {
 63                 return e.name
 64             }),
 65             b = a.map(function(e) {
 66                 return e.code
 67             }),
 68             t = o(a[0]),
 69             r = t.map(function(e) {
 70                 return e.name
 71             }),
 72             i = t.map(function(e) {
 73                 return e.code
 74             }),
 75             l = o(a[0].sub[0]),
 76             f = l.map(function(e) {
 77                 return e.name
 78             }),
 79             p = l.map(function(e) {
 80                 return e.code
 81             }),
 82             v = s[0],
 83             h = r[0],
 84             V = f[0],
 85             y = [{
 86                 displayValues: s,
 87                 values: b,
 88                 cssClass: "col-province"
 89             },
 90             {
 91                 displayValues: r,
 92                 values: i,
 93                 cssClass: "col-city"
 94             }];
 95             c.showDistrict && y.push({
 96                 values: p,
 97                 displayValues: f,
 98                 cssClass: "col-district"
 99             });
100             var g = {
101                 cssClass: "city-picker",
102                 rotateEffect: !1,
103                 formatValue: function(e, n, a) {
104                     return a.join(" ")
105                 },
106                 onChange: function(a, o, u) {
107                     var s, b = a.cols[0].displayValue;
108                     if (b !== v) {
109                         var t = m(b);
110                         s = t[0].name;
111                         var r = d(b, s);
112                         return a.cols[1].replaceValues(t.map(function(e) {
113                             return e.code
114                         }), t.map(function(e) {
115                             return e.name
116                         })),
117                         c.showDistrict && a.cols[2].replaceValues(r.map(function(e) {
118                             return e.code
119                         }), r.map(function(e) {
120                             return e.name
121                         })),
122                         v = b,
123                         h = s,
124                         a.updateValue(),
125                         !1
126                     }
127                     if (c.showDistrict && (s = a.cols[1].displayValue, s !== h)) {
128                         var i = d(b, s);
129                         return a.cols[2].replaceValues(i.map(function(e) {
130                             return e.code
131                         }), i.map(function(e) {
132                             return e.name
133                         })),
134                         h = s,
135                         a.updateValue(),
136                         !1
137                     }
138                     e(n).attr("data-code", o[o.length - 1]),
139                     e(n).attr("data-codes", o.join(",")),
140                     c.onChange && c.onChange.call(n, a, o, u)
141                 },
142                 cols: y
143             };
144             if (this) {
145                 var C = e.extend({},
146                 c, g),
147                 w = e(this).val();
148                 //注意，這里是默認顯示第一個省的三級聯動，而且是必須的，如果匹配不到，會報錯二級聯動沒有被定義（坑！）
149                 //這個'北京 北京市 東城區'條件改成：自己數據庫中的第一個省的三級聯動名稱即可，比如你想要把北京顯示在默認上（當然，最好是json數組對象的第一個省）
150                 //替換下面的判斷條件：北京市 市轄區 東城區（判斷條件要與默認顯示的數據一致，不然回報錯，並且，默認的條件也要和動態的數據一致）
151                 var defaultDatas = "北京市 市轄區 東城區";//初始化默認的顯示數據
152                 if($("#ds").val()){//回顯的數據--數據庫的數據
153                     defaultDatas = $("#ds").val();
154                 }
155                 if (w || (w = defaultDatas), v = w.split(" ")[0], h = w.split(" ")[1], V = w.split(" ")[2], w) {
156                     if (C.value = u(w), C.value[0]) {
157                         var D = m(C.value[0]);
158                         C.cols[1].values = D.map(function(e) {
159                             return e.code
160                         }),
161                         C.cols[1].displayValues = D.map(function(e) {
162                             return e.name
163                         })
164                     }
165                     if (C.value[1]) {
166                         if (c.showDistrict) {
167                             var k = d(C.value[0], C.value[1]);
168                             C.cols[2].values = k.map(function(e) {
169                                 return e.code
170                             }),
171                             C.cols[2].displayValues = k.map(function(e) {
172                                 return e.name
173                             })
174                         }
175                     } else if (c.showDistrict) {
176                         var k = d(C.value[0], C.cols[1].values[0]);
177                         C.cols[2].values = k.map(function(e) {
178                             return e.code
179                         }),
180                         C.cols[2].displayValues = k.map(function(e) {
181                             return e.name
182                         })
183                     }
184                 }
185                 e(this).picker(C)
186             }
187         })
188     },
189     n = e.fn.cityPicker.prototype.defaults = {
190         showDistrict: !0
191     }
192 } ($);

回顯的html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="jquery-weui.min.css" />
    <style>
        #city-picker{
            margin-left: 40%;
            margin-right: 20%;
            margin-top: 20%;
            width: 200px;
            height: 40px;
        }
    </style>
</head>
<body>

<input type='text' id='city-picker' value="湖南省 長沙市 芙蓉區" placeholder='請選擇省市區縣' />
<input type="text" id="ds" name="" value="湖南省 長沙市 芙蓉區"><!-- 這里使用隱藏域 -->
<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-weui.min.js"></script>
<script type="text/javascript" src="city-picker.min.js"></script>
<script>
    
    $("#city-picker").cityPicker({
        title: "選擇省市區/縣",
        onChange: function (picker, values, displayValues) {
            console.log(values, displayValues);
        }
    });
</script>
</body>
</html>

總得來說，這應該是封裝過的js，有可能別人有方法初始化動態數據或者回顯數據，只是我這邊比較捉急，沒時間在網絡上各種搜索了，直接看源碼...  

歡迎各位大神丟板磚，提意見。嘿嘿嘿~~~


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 city-picker插件使用-移動h5三級聯動 基於city-picker的省市區三級聯動列表 H5個性三級聯動日期插件（一） 使用mint ui 的picker解決城市三級聯動 四級地址插件升級改造（京東商城地址選擇插件）city-picker Mint-UI Picker 三級聯動 小程序picker自定義三級聯動 Mint-UI Picker 三級聯動 使用JSon實現三級聯動 vue移動端地址三級聯動組件(一)
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM