城市三级联动

HTML代码如下：

省：<select id="province">
	<option>--请选择--</option>
</select>
市：<select id="cities ">
	<option>--请选择--</option>
</select>
区：<select id="area">
	<option>--请选择--</option>
</select>

要做三级联动，首先是根据相应的数据格式进行解析（不同的格式写不同的代码）

首先，第一步取出如上图所示的北京市

var data = city[0]

那么data拿到的是一个对象
继而我们需要

for (let key in data){
	console.log(data[key].name)
}

同样的取出相应的市区，在下拉框中实现联动，onchange方法是一个很好的办法（具体实现见下）
实例化对象的方法：

		<script>
			var province= document.getElementById("province");
			var cities = document.getElementById("cities ");
			var area = document.getElementById("area");
			var children,areachildren;
			var data = city[0];
			for(let key in data){
				var option = new Option(data[key ].name,key );
				//实例化，data[key ].name为文本值，key 为value值
				provice.appendChild(option)
			}
			province.onchange = function(){
				cities.options.length = 1;//城市选择的长度变为1个
				var val= this.value;//把当前省份的值提取出来
				children = data[val].child;//把市拿出来
				for(let key in children){
					var opt= new Option(children[key ].name,key );
					cities .appendChild(opt);
				}
			}
			cities.onchange = function (){
				area.options.length =1;//把区的长度变为1（相当于初始化area下拉框）
				var val = this.value;//将当前选择的城市，取出来
				areachildren = children[val].child;
				for(let key in areachildren){
					var opt = new Option(areachildren[key],key)
					area.appendchild(opt)
				}
		}