首页 > 代码库 > city-picker插件使用-移动h5三级联动
city-picker插件使用-移动h5三级联动
首先访问该链接：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 =http://www.mamicode.com/ [{//全国的数据太长，只能先放一个北京 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 = http://www.mamicode.com/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 =http://www.mamicode.com/ [{ 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 = http://www.mamicode.com/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，有可能别人有方法初始化动态数据或者回显数据，只是我这边比较捉急，没时间在网络上各种搜索了，直接看源码...
欢迎各位大神丢板砖，提意见。嘿嘿嘿~~~
city-picker插件使用-移动h5三级联动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。