<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 450px;
padding: 5px;
border: 2px solid #eeeeee;
}
.xx{
border-bottom: 2px solid #56b4f8;
list-style: none;
width: 450px;
height: 40px;
box-sizing: border-box;
}
.xx li{
width: 80px;
float: left;
height: 40px;
line-height: 40px;
text-align: center;
}
.active{
background-color: #56b4f8;
color: #f5f5f5;
}
span{
width: 80px;
height: 30px;
display: inline-block;
font-size: 12px;
text-align: center;
line-height: 15px;
margin: 5px;
/* float: left; */
}
span:hover{
background-color: #56b4f8;
color: #f5f5f5;
}
#country{
width: 450px;
/* height: 300px; */
background-color: pink;
}
#countryside{
width: 450px;
/* height: 300px; */
background-color: yellow;
}
.sure{
background-color: #56b4f8;
color: #f5f5f5;
}
</style>
</head>
<body>
<div class="box">
<ul class="xx">
<li class="l1 active">省份</li>
<li class="l1">城市</li>
<li class="l1">区县</li>
</ul>
<div class="show">
<div id="city"></div>
<div id="country"></div>
<div id="countryside"></div>
</div>
</div>
<script src="./area-json.js"></script>
<script>
var li = document.querySelectorAll(".xx li")
var div = document.querySelectorAll(".show div")
var box = document.querySelector(".box")
var show = document.querySelector(".show")
var city = document.getElementById("city");
var country = document.getElementById("country");
var countryside = document.getElementById("countryside");
var countryarr = [];
var countrysidearr = [];
add(city,data)
for(var i = 0;i<data.length;i++){
city.children[i].onclick = function(){
country.innerText= ""
for(var j = 0;j<data.length;j++){
if(data[j].code == this.className){
countryarr = data[j].children
}
}
for(var d = 0;d<li.length;d++){
li[d].className = "li"
}
li[1].className = "l1 active"
div[1].style.display = "block"
div[0].style.display = "none"
div[2].style.display = "none"
add(country,countryarr)
}
}
for(var k = 0;k<countryarr.length;k++){
country.children[k].onclick = function(){
countryside.innerHTML = ""
for(var l = 0;l<data.length;l++){
if(data[l].code == this.className){
countrysidearr = countryarr[j].children
}
}
add(countryside,countrysidearr)
}
}
li[0].onclick = function(){
for(var b = 0;b<li.length;b++){
li[b].className = "li"
}
li[0].className = "l1 active"
div[0].style.display = "block"
div[1].style.display = "none"
div[2].style.display = "none"
}
li[1].onclick = function(){
for(var b = 0;b<li.length;b++){
li[b].className = "li"
}
li[1].className = "l1 active"
div[1].style.display = "block"
div[0].style.display = "none"
div[2].style.display = "none"
}
li[2].onclick = function(){
for(var b = 0;b<li.length;b++){
li[b].className = "li"
}
li[2].className = "l1 active"
div[2].style.display = "block"
div[0].style.display = "none"
div[1].style.display = "none"
}
function add (dom,arr){
for(var i = 0;i<arr.length;i++){
var span = document.createElement("span");
span.innerHTML = arr[i].name;
span.className = arr[i].code;
dom.appendChild(span);
}
}
</script>
</body>
</html>
js文件下载地址：https://download.csdn.net/download/weixin_46073353/16759489?spm=1001.2014.3001.5503
