二级联动表单

代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>二维数组下拉列表[动态改变下拉内容]</title>
	</head>
	<!-- //每当重新加载，则清除文档表单缓存 -->
	<body onLoad="javascript:document.form.reset()">
       <h3>选择省份及城市</h3>
	   <form name="form">
	   
	   <p>省份:
		   <select name="opp" onclick="ChangCity()">
			   <option>--请选择--</option>
			   <option>广东省</option>
			   <option>湖南省</option>
			   <option>浙江省</option>
		   </select>
	   </p>
	   
	   <p>城市:
		   <select name="opc">
			   <option>--请选择--</option>
			   <!-- //之后js动态生成<option> -->
		   </select>
	   </p>
	   
   </form>
</body>
<script>
	//js中数组只有一维数组
	//但是·我们可以将数组一级数组中的元素变为数组
	//以便构成我们需要的二级数组
	var aCity = new Array();
	aCity[0] = new Array();
	aCity[1] = new Array();
	aCity[2] = new Array();
	aCity[3] = new Array();
	aCity[0][0] = "--请选择--";
	aCity[1][0] = "--请选择--";
	aCity[1][1] = "广州市";
	aCity[1][2] = "深圳市";
	aCity[1][3] = "珠海市";
	aCity[2][0] = "--请选择--";
	aCity[2][1] = "长沙市";
	aCity[2][2] = "株洲市";
	aCity[2][3] = "湘潭市";
	aCity[3][0] = "--请选择--";
	aCity[3][1] = "杭州市";
	aCity[3][2] = "台州市";
	aCity[3][3] = "温州市";
	
	function ChangCity () {
		var i,ip,ic;
		//动态获取表单中opp<select>中的<option>索引
		ip = document.form.opp.selectedIndex;
		ic = 0;
		while(aCity[ip][ic] != null)
		ic++;
		//动态分配表单中opc<select>的长度
		document.form.opc.length = ic;
		for (i = 0; i <= ic - 2; i++)
		//动态的给表单中opc<select>中的<option>赋值
		document.form.opc[i] = new Option(aCity[ip][i]);
		//注意:构造函数Option('text' , 'value' , '' , true/false)
		//返回的是<option>,且倒数第二个参数为默认选项,最后一个表明是否被选中,如selected
		document.form.opc[3] = new Option('郝' , '2' , true , true);
		document.form.opp.focus();
	}
</script>
</html>
爬行中…
猜你喜欢
