一个简单的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 100px; 25 height: 20px; 26 margin-left: 20px; 27 border: 1px solid #FF0000; 28 position: relative; 29 } 30 31 .show { 32 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>
有些样式没有实现,需要完善