原生js写三级联动 java_原生JS实现省市三级联动 Ajax

html>

Document

*{

margin: 0;

padding: 0;

list-style: none;

}

#province,#city,#town{

width: 80%;

overflow: hidden;

margin: 10px  auto;

}

#province li,#city li,#town li{

float: left;

width: 60px;

height: 30px;

background-color: black;

color: hsl(173, 25%, 94%);

text-align: center;

line-height: 30px;

margin-left: 10px;

margin-top: 5px;

}

---

---

var provinceUL = document.getElementById("province");

var cityUL = document.getElementById("city");

var townUL = document.getElementById("town");

var xhr = new XMLHttpRequest();

xhr.open("get","http://api.yytianqi.com/citylist/id/2",true);

xhr.send();

xhr.onreadystatechange = function(){

if(xhr.readyState == 4 && xhr.status == 200){

var result = xhr.responseText;

var obj = JSON.parse(result);

var provinceList = obj["list"];

provinceList.forEach(function(province){

var {

city_id,

name,

list

} = province;

var li = document.createElement("li");

li.innerHTML = name;

li.dataId = city_id;

li.className = "provinceli";

li.cityList = list;

provinceUL.appendChild(li);

li.onclick = function(){

cityUL.innerHTML = "";

var cityList = this.cityList;

cityList.forEach(function(city){

var {

city_id,

name,

list

} = city;

var cityLi = document.createElement("li");

cityLi.dataId = city_id;

cityLi.townList = list;

cityLi.innerHTML = name;

cityLi.className = "cityli";

cityUL.appendChild(cityLi);

cityLi.onclick = function(){

var townList = this.townList;

if(townList){

townUL.innerHTML = "";

townList.forEach(function(town){

var {

city_id,

name

} = town;

var townLi = document.createElement("li");

townLi.innerHTML = name;

townLi.dataId = city_id;

townLi.className = "townli";

townUL.appendChild(townLi);

})

}else{

townUL.innerHTML = "";

}

}

})

}

})

}

}

document.onclick = function(e){

var evt = window.event || e;

switch(evt.target.className){

case "provinceli":

setColor(evt.target);

break;

case "cityli":

setColor(evt.target);

break;

case "townli":

setColor(evt.target);

break;

}

}

function setColor(li){

var ul = li.parentNode;

var ulList = ul.getElementsByTagName("li");

for(var i = 0;i 

ulList[i].style.backgroundColor = "black";

}

li.style.backgroundColor = "#156444";

}