js实现简单的三级联动（省+市+区）

首先看演示：
主要是使用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);
		}			
	}

以上只是实现了简单的三级联动，对于样式并没有进行过多的设置，只要是对于数据的处理。