首先看演示:
主要是使用json数据进行渲染。当我们选择到对应的省份时,就会在城市列表下面生成对应的城市,点击城市,在地区的列表下生成对应的区。
数据来源:来自于丫丫天气的城市API接口
利用ajax请求到对应的数据,利用数据创建列表
ajax文件:
function ajax(options){
var {path,data = {},method = 'get',successFn,beforeFn = null} = options;
var xhr = new XMLHttpRequest();
var nowtime = new Date().getTime(),str = '';
for(var prop in data){
str+=prop +"=" + data[prop] + "&";
}
xhr.onreadystatechange = function() {
if(xhr.status == 200 && xhr.readyState == 4){
var datas = xhr.responseText;
try{
datas = JSON.parse(datas);
}catch(e){
}
successFn && successFn(datas);
}else{
beforeFn && beforeFn();
}
}
if(method.toLowerCase() === 'get'){
str = str + "nowtime="+nowtime;
xhr.open(method,`${path}?${str}`);
xhr.send();
}else{
xhr.open(method,path);
str = str.slice(0,-1);
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(str);
}
}
利用ajax函数,可以更加方便的调用接口。
具体实现:
var province = document.querySelector("#province");
var city = document.querySelector("#city");
var town = document.querySelector("#town");
var data,datas;
init();
function init(){
var options = {
path:"接口url",
successFn:function(res){
res.list.map((item)=>{
var option = document.createElement("option");
option.value = item.city_id;
option.textContent = item.name;
province.appendChild(option);
})
data = res.list;
}
}
ajax(options);
province.addEventListener("change",clickHandler);
city.addEventListener("change",clickHandler);
}
//点击对应的列表,渲染数据
function clickHandler(e){;
var index = e.target.selectedIndex;//获取到当前列表中选择的是哪一项
if(!index){
city.innerHTML = "<option>请选择城市</option>";
town.innerHTML = "<option>请选择乡镇</option>";
return;
}
if(e.target.id == "province"){
city.innerHTML = "<option>请选择</option>";
town.innerHTML = "<option>请选择</option>";
var arr = data.filter((item)=>item.city_id == e.target.options[index].value)[0].list;
arr.map((item)=>{
var option = document.createElement("option");
option.value = item.city_id;
option.textContent = item.name;
city.appendChild(option);
})
datas = arr;
}else if(e.target.id == "city"){
town.innerHTML = "<option>请选择</option>";
if(datas[0].hasOwnProperty("list")){
var arr = datas.filter((item)=>item.city_id == e.target.options[index].value)[0].list;
arr.map((item)=>{
var option = document.createElement("option");
option.value = item.city_id;
option.textContent = item.name;
town.appendChild(option);
})
}else{
var option = document.createElement("option");
option.textContent = datas[index-1].name;
town.appendChild(option);
}
}
以上只是实现了简单的三级联动,对于样式并没有进行过多的设置,只要是对于数据的处理。