-
Notifications
You must be signed in to change notification settings - Fork 294
/
index.html
117 lines (105 loc) · 4.09 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>城市选择的三种实现</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<fieldset>
<legend>方法一:下拉选择框实现省市区(县)三级联动</legend>
<form action="#">
<label for="addr-show">您选择的是:
<input type="text" value="" id="addr-show">
</label>
<br />
<!--省份选择-->
<select id="prov" onchange="showCity(this)">
<option value="">=请选择省份=</option>
</select>
<!--城市选择-->
<select id="city" onchange="showCountry(this)">
<option value="">=请选择城市=</option>
</select>
<!--县区选择-->
<select id="country" onchange="selecCountry(this)">
<option value="">=请选择县区=</option>
</select>
<button type="button" class="btn met1" onClick="showAddr()">确定</button>
</form>
</fieldset>
<fieldset>
<legend>下拉选择框实现省市区(县)三级联动以及获得地区行政编码</legend>
<form action="#">
<label for="addr-show-number">您选择的是:
<input type="text" value="" id="addr-show-number">
</label>
<br />
<!--省份选择-->
<select id="prov-number" onchange="showCity04(this)">
<option value="">=请选择省份=</option>
</select>
<!--城市选择-->
<select id="city-number" onchange="showCountry04(this)">
<option value="">=请选择城市=</option>
</select>
<!--县区选择-->
<select id="country-number" onchange="selecCountry04(this)">
<option value="">=请选择县区=</option>
</select>
<button type="button" class="btn met04" onClick="showAddr04()">确定</button>
</form>
</fieldset>
</div>
<!--**********************************华丽丽*************************************-->
<div>
<fieldset>
<legend>方法二:按级选中省市县/区</legend>
<label for="addr-show02">您选择的是:
<input type="text" id="addr-show02">
</label>
<div id="addr-choice">
<ul id="title-wrap">
<li value="0">省份</li>
<li value="1">城市</li>
<li value="2">县区</li>
</ul>
<div id="show-panel">
<ul id="addr-wrap">
</ul>
</div>
</div>
<button type="button" class="btn met2">确定</button>
</fieldset>
</div>
<!--**********************************华丽丽*************************************-->
<div>
<fieldset>
<legend>方法三:按字母顺序选中城市</legend>
<label for="addr-show03">您选择的是:
<input type="text" id="addr-show03">
</label>
<div id="data-wrap">
<ul id="data-order">
<li value='0'>热门</li>
<li value='1'>ABCD</li>
<li value='2'>EFGH</li>
<li value='3'>JKLM</li>
<li value='4'>NPQR</li>
<li value='5'>STWX</li>
<li value='6'>YZ</li>
</ul>
<div id="data-show"></div>
</div>
</fieldset>
</div>
<script src="city.js"></script>
<script src="city02.js"></script>
<script src="city03.js"></script>
<script src="method01.js"></script>
<script src="method02.js"></script>
<script src="method03.js"></script>
<script src="method04.js"></script>
</body>
</html>