zoukankan html css js c++ java

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 = [{//全国的数据太长，只能先放一个北京
  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，有可能别人有方法初始化动态数据或者回显数据，只是我这边比较捉急，没时间在网络上各种搜索了，直接看源码...

欢迎各位大神丢板砖，提意见。嘿嘿嘿~~~

查看全文

相关阅读:
Docker容器启动时初始化Mysql数据库
 使用Buildpacks高效构建Docker镜像
 Mybatis 强大的结果集映射器resultMap
Java 集合排序策略接口 Comparator
Spring MVC 函数式编程进阶
 换一种方式编写 Spring MVC 接口
 【asp.net core 系列】6 实战之一个项目的完整结构
 【asp.net core 系列】5 布局页和静态资源
 【asp.net core 系列】4. 更高更强的路由
 【Java Spring Cloud 实战之路】- 使用Nacos和网关中心的创建

原文地址：https://www.cnblogs.com/cunkouzh/p/6677407.html