首先访问该链接: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:
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' value="湖南省 长沙市 芙蓉区" placeholder='请选择省市区县' />
20 <input type="text" id="ds" name="" value="湖南省 长沙市 芙蓉区"><!-- 这里使用隐藏域 -->
21 <script src="jquery.min.js"></script>
22 <script type="text/javascript" src="jquery-weui.min.js"></script>
23 <script type="text/javascript" src="city-picker.min.js"></script>
24 <script>
25
26 $("#city-picker").cityPicker({
27 title: "选择省市区/县",
28 onChange: function (picker, values, displayValues) {
29 console.log(values, displayValues);
30 }
31 });
32 </script>
33 </body>
34 </html>
总得来说,这应该是封装过的js,有可能别人有方法初始化动态数据或者回显数据,只是我这边比较捉急,没时间在网络上各种搜索了,直接看源码...
欢迎各位大神丢板砖,提意见。嘿嘿嘿~~~
更多专业前端知识,请上 【猿2048】www.mk2048.com