js城市三级联动

在head部分要事先引入城市数据

（不知道怎么引入文件所以城市数据只能自己去找了）

省：<select name="" id="province">
		<option value="">--请选择--</option>
</select>
市：<select name="" id="cities">
		<option value="">--请选择--</option>
</select>
区：<select name="" id="area">
		<option value="">--请选择--</option>
</select>
<script>
	var prov = document.getElementById('province');
	var cities = document.getElementById('cities');
	var area = document.getElementById('area');
	//拿到第一条数据
	var data = city[0];
	var children;
	var childs;
	//遍历data
	for(var i in data){
		// console.log(i)
		// 创建实例化对象option，并存放下标为i的数据的name属性的属性值，i为option的value
		var opts = new Option(data[i].name,i)
		//将option添加进省中
		prov.appendChild(opts);
	}
	// 为省绑定onchange事件
	prov.onchange = function(){
		// 每次“省”内的值有变化时，清空“市”的所有option,避免出现"市"的下拉框内出现上一个省的市
		cities.options.length = 1;
		// 创建val变量接收"省"的下拉框内的选项的value
		var val = this.value;
		// console.log(val)
		
		// children变量用于接收下标为val的数据的child属性的属性值
		children = data[val].child;
		//console.log(children)
		for(var j in children){
			var cityOpt = new Option(children[j].name,j);
			cities.appendChild(cityOpt);
		}
	}
	cities.onchange = function(){
		area.options.length = 1;
		var local = this.value;
		
		childs = children[local].child;
		for(var k in childs){
			var areaOpt = new Option(childs[k],k)
			area.appendChild(areaOpt)
		}
}