首页 > 代码库 > 城市三联动简单实例

城市三联动简单实例

2024-08-26 19:46:02   220人阅读

一个简单的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>

有些样式没有实现,需要完善

城市三联动简单实例


联系
我们