城市三级联动

代码实现：

	// 城市数据
	cityData = [
		{
			"130000": {
				// data[i].name
				"name": "河北省",      // 一级
				// data[proviceValue].child
				"child": {
					"130100": {
						// children[j].name
						"name": "石家庄市",     // 二级
						"child": {             // 三级
							"130101": "市辖区",
							"130102": "长安区",
							"130104": "桥西区",
							. . .
						}
					},
					"130200": { . . . },
					. . .
				}
			},
			"140000": { . . . },
			. . .
		}
	]
	

	// HTML code
	<select id="pro"><option>--选择--</option></select>
	<select id="city"><option>--选择--</option></select>
	<select id="area"><option>--选择--</option></select>


	// JS code
	var pro = document.getElementById("pro");
	var city = document.getElementById("city");
	var area = document.getElementById("area");
	var pro_child, city_child;
	
	var data = cityData[0];		//  把 服务器返回的数据 赋值给
	for(var i in data){	
		var op = new Option(data[i].name, i);
		pro.appendChild(op);
	}
	pro.onchange = function(){
		var pro_value = this.value;
		pro_child = data[pro_value].child;
		for(var i in pro_child){
			var op = new Option(pro_child[i].name, i)
			city.appendChild(op);
		}
	}
	city.onchange = function(){
	var city_value = this.value;
	city_child = pro_child[city_value].child;
		for(var i in city_child){
			var op = new Option(city_child[i], i);
			area.appendChild(op);
		}
	}
	

逻辑图：