前端基础 - JavaScript之省市联动简单案例

JavaScript之省市联动案例 效果图：

代码：

	
		
		
	
	
		// 定义二维数组,存储城市信息
		var cities = new Array(4);
		cities[0] = new Array("市辖区");
		cities[1] = new Array("长春市","吉林市","松原市","延边市");
		cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
		cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
		cities[4] = new Array("南京市","苏州市","扬州市","无锡市");

		//给省的select注册onchange事件
		window.onload = init;
		function init(){
			//获取省select 绑定 onchange
			var provinceSelect = document.getElementById("province");
			provinceSelect.onchange = change;
		}
		
		function change(){
			//清空市select中的option
			document.getElementById("city").innerHTML = "----请-选-择-市----";
			//获取选中了哪一个省 this.value
			//发现 省的value值 和 二维数组中的下标正好相等
			var cs = cities[this.value];
			//遍历数组,取出每一个市的名称
			for(var i = 0;i < cs.length;i++){
				var cname = cs[i];
				//取出一个市.我们需要创建一个option
				var op = document.createElement("option");//
				var textNode = document.createTextNode(cname);
				//把文本节点 添加到 op中
				op.appendChild(textNode);//cname
				//把每次创建的option添加到 市这个select中
				document.getElementById("city").appendChild(op);
			}
			
		}
		
	
	
		
			----请-选-择-省----
			北京
			吉林省
			山东省
			河北省
			江苏省
		
		
			----请-选-择-市----