一个简单的demo,方法比较low,仅供参考
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title></title>
7 <style type="text/css">
8 * {
9 margin: 0;
10 padding: 0;
11 }
12
13 ul li {
14 list-style-type: none;
15 }
16
17 .wrap {
18 display: flex;
19 }
20
21 .one,
22 .two,
23 .three {
24 width: 100px;
25 height: 20px;
26 margin-left: 20px;
27 border: 1px solid #FF0000;
28 position: relative;
29 }
30
31 .show {
32 width: 100px;
33 height: 200px;
34 position: absolute;
35 top: 22px;
36 border: 1px solid blue;
37 }
38
39 .show ul li {
40 border-bottom: 1px solid red;
41 }
42
43 .show ul li:hover {
44 background-color: gold;
45 }
46
47 .show {
48 display: none;
49 }
50 </style>
51 </head>
52
53 <body>
54 <div class="wrap">
55 <div class="one">
56 <span id="changeclick">请选择省份</span>
57 <div class="show">
58 <ul id="sheng">
59
60 </ul>
61 </div>
62 </div>
63 <div class="two">
64 <span id="cityclick">请选择城市</span>
65 <div class="show">
66 <ul id="city">
67
68 </ul>
69 </div>
70 </div>
71 <div class="three">
72 <span id="areaclick">请选择区/县</span>
73 <div class="show">
74 <ul id="areass">
75
76 </ul>
77 </div>
78 </div>
79 </div>
80 </body>
81 <script type="text/javascript">
82 var all = [{
83 name: ‘河南省‘,
84 citylist: [{
85 name: ‘信阳市‘,
86 areaslist: [‘新县‘, ‘固始县‘, ‘罗山县‘]
87 }, {
88 name: ‘郑州市‘,
89 areaslist: [‘新区‘, ‘高新区‘, ‘二七区‘]
90 }]
91 }, {
92 name: ‘山西省‘,
93 citylist: [{
94 name: ‘大同市‘,
95 areaslist: [‘区1‘, ‘区2‘]
96 }]
97 }, ];
98 var changeClick = document.getElementById(‘changeclick‘);
99 var sheng = document.getElementById(‘sheng‘);
100 var shows = document.getElementsByClassName(‘show‘)[0];
101 var showc = document.getElementsByClassName(‘show‘)[1];
102 var showa = document.getElementsByClassName(‘show‘)[2];
103
104 function shengFun() {
105 var len = all.length;
106 for(var i = 0; i < len; i++) {
107 sheng.innerHTML += ‘<li>‘ + all[i].name + ‘</li>‘
108 }
109 };
110 shengFun();
111 //设置省的点击事件
112 var n; //保存点击的是哪个城市
113 changeClick.onclick = function() {
114 shows.style.display = ‘block‘;
115 }
116 //选择哪个省的点击事件
117 var cityClick = document.getElementById(‘cityclick‘);
118 var cityLists = document.getElementById(‘city‘);
119 var lis = sheng.children;
120
121 for(var i = 0; i < lis.length; i++) {
122 lis[i].index = i;
123 lis[i].onclick = function() {
124 n = this.index;
125 cityLists.innerHTML = ‘‘;
126 var city = all[this.index].citylist;
127 for(var j = 0; j < city.length; j++) {
128 cityLists.innerHTML += ‘<li>‘ + city[j].name + ‘</li>‘
129 }
130 cityClick.onclick = function() {
131 showc.style.display = ‘block‘;
132 }
133 var citys = cityLists.children;
134 console.log(citys);
135 //获取县区
136 var areaClick = document.getElementById(‘areaclick‘);
137 var areasList = document.getElementById(‘areass‘);
138 for(var k = 0; k < citys.length; k++) {
139 citys[k].index = k;
140 citys[k].onclick = function() {
141 areasList.innerHTML = ‘‘;
142 var areasss = all[n].citylist[this.index].areaslist;
143 console.log(areasss);
144 for(var m = 0; m < areasss.length; m++) {
145 areasList.innerHTML += "<li>" + areasss[m] + "</li>";
146 }
147 }
148 }
149 areaClick.onclick = function() {
150 showa.style.display = ‘block‘;
151 }
152
153 }
154 }
155 </script>
156
157 </html>
有些样式没有实现,需要完善
时间： 2024-07-31 16:31:25