-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
135 lines (133 loc) · 5.06 KB
/
index.html
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>省市县级联下拉框</title>
<style>
body {font:normal 14px/1.6 normal verdand, 'microsoft yahei'; color:#333;}
.box {max-width:960px; margin:20px auto;}
h4 {margin:40px 0 0;}
pre {padding:5px 10px; margin:5px 0; font-family:consolas; font-size:14px; color:#06c; background:#f5f5f5;}
.tip {font-weight:normal; color:#aaa;} .result {color:#090;}
/* 下拉框样式 */
.ui-select {
display: inline-block;
height: 36px;
line-height: 1;
padding: 3px 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
vertical-align: top;
font-size: 14px;
color: #1f282e;
background: #fff;
border: 1px solid #adbdc7;
border-radius: 4px;
outline: none;
-webkit-transition: border-color .2s ease-in-out;
transition: border-color .2s ease-in-out;
}
.ui-select:hover {
border-color: #7f8e97;
}
.ui-select:focus {
outline: none;
border-color: #009dff;
}
.ui-select[disabled] {
color: #dde8f0;
background-color: #f3f6f7;
border-color: #cbd5dc;
}
</style>
</head>
<body>
<div class="box">
<h4>一、默认初始化：</h4>
<pre>$('#demo1').citySelect();</pre>
<div id="demo1">
<select class="ui-select" name="province"></select>
<select class="ui-select" name="city"></select>
<select class="ui-select" name="area"></select>
<select class="ui-select" name="street"></select>
</div>
<h4>二、按行政区划代码初始化：</h4>
<pre>$('#demo2').citySelect({search: 441900401}); <span class="tip">// 广东省东莞市松山湖管委会</span></pre>
<div id="demo2">
<select class="ui-select" name="province"></select>
<select class="ui-select" name="city"></select>
<select class="ui-select" name="area"></select>
<select class="ui-select" name="street"></select>
</div>
<h4>三、按地址名称初始化：</h4>
<pre>$('#demo3').citySelect({search: '香港特别行政区,香港岛,湾仔区'});</pre>
<div id="demo3">
<select class="ui-select" name="province"></select>
<select class="ui-select" name="city"></select>
<select class="ui-select" name="area"></select>
</div>
<h4>四、下拉框 change 回调函数：<span class="tip">当下拉框的值改变时触发，返回当前下拉框的值和对应文字</span></h4>
<pre>$('#demo4').citySelect({
onchange: function(code, name) {
$('#result1').html('当前选择：' + name + '(' + code + ')');
}
});</pre>
<div id="demo4">
<select class="ui-select" name="province"></select>
<select class="ui-select" name="city"></select>
<select class="ui-select" name="area"></select>
<select class="ui-select" name="street"></select>
<p class="result" id="result1"></p>
</div>
<h4>五、设置缺省提示语：</h4>
<pre>$('#demo5').citySelect({prompt: ['- 省/直辖市 -', '- 市 -', '- 区/县 -', '- 乡/镇/街道办 -']});</pre>
<div id="demo5">
<select class="ui-select" name="province"></select>
<select class="ui-select" name="city"></select>
<select class="ui-select" name="area"></select>
<select class="ui-select" name="street"></select>
</div>
<h4>六、取值：</h4>
<pre>$('#fetch').click(function() {
$('#demo5').citySelect(function(code, nameArr) {
$('#result2').html(
'行政代码：' + code + '<br>' +
'地址：' + nameArr.join('，')
);
});
});</pre>
<div id="demo5">
<div>
获取本文例五当前选取的信息：
<button id="fetch">获取</button>
</div>
<p class="result" id="result2"> </p>
</div>
</div>
<script src="jquery-1.11.3.min.js"></script>
<script src="city_select.js"></script>
<script>
$('#demo1').citySelect();
$('#demo2').citySelect({search: 441900401});
$('#demo3').citySelect({search: '香港特别行政区,香港岛,湾仔区'});
$('#demo4').citySelect({
onchange: function(code, name) {
$('#result1').html('当前选择：' + name + '(' + code + ')');
}
});
$('#demo5').citySelect({
prompt: ['- 省/直辖市 -', '- 市 -', '- 区/县 -', '- 乡/镇/街道办 -']
});
$('#fetch').click(function() {
$('#demo5').citySelect(function(code, nameArr) {
$('#result2').html(
'行政代码：' + code + '<br>' +
'地址：' + nameArr.join('，')
);
});
});
</script>
</body>
</html>