cityPicker.js
3.29 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
/**
*
* cityPicker.js
* cityPicker is made by Framework picker component which effects like iOS native select.
*
* nzb329@163.com
*
* 2017-10-28
*
*/
;
(function(window, $, undefined) {
/**
* [getProvince 获取省]
* @param {[Object]} regions [省市区数据]
* @return {[Array]} [省数组]
*/
function getProvince(regions) {
return regions['provincesArr'];
}
/**
* [getCity 获取市]
* @param {[Object]} regions [省市区数据]
* @param {[String]} provinceName [省名]
* @return {[Array]} [市数组]
*/
function getCity(regions, provinceName) {
return regions['provinces'][provinceName]['citiesArr'];
}
/**
* [getArea 获取区]
* @param {[Object]} regions [省市区数据]
* @param {[String]} provinceName [省名]
* @param {[String]} cityName [市名]
* @return {[Array]} [区数组]
*/
function getArea(regions, provinceName, cityName) {
return regions['provinces'][provinceName]['cities'][cityName]['areasArr'];
}
// 初始化 Framework7
var myApp = new Framework7();
// 初始化省市区
var province = getProvince(regions),
city = getCity(regions, '北京市'),
area = getArea(regions, '北京市', '北京市');
// 保存 picker 选择的省
var provinceSelect = '';
// 省市区联动 / Framework7 picker
var pickerLocation = myApp.picker({
input: '#location',
rotateEffect: true,
toolbarTemplate: '<div class="toolbar">\
<div class="toolbar-inner">\
<div class="left">\
<a href="#" class="link close-picker">取消</a>\
</div>\
<div class="right">\
<a href="#" class="link close-picker">完成</a>\
</div>\
</div>\
</div>',
cols: [{
cssClass: 'f-s-14',
width: '33.33%',
textAlign: 'left',
values: province,
onChange: function(picker, province) {
if (picker.cols[1].replaceValues) {
provinceSelect = province;
city = getCity(regions, province);
area = getArea(regions, province, city[0]);
picker.cols[1].replaceValues(city);
picker.cols[2].replaceValues(area);
}
}
},
{
cssClass: 'f-s-14',
width: '33.33%',
textAlign: 'center',
values: city,
onChange: function(picker, city) {
if (picker.cols[2].replaceValues) {
area = getArea(regions, provinceSelect, city);
picker.cols[2].replaceValues(area);
}
}
},
{
cssClass: 'f-s-14',
width: '33.33%',
textAlign: 'right',
values: area,
}
]
});
})(window, jQuery);