多级联动系列——数组二级联动

吐舌头好久没写博客了,前段时间由于搬家,眼下住的地方没有网络,就没有写博客了。找到了一个能够蹭网的地方偷笑给力。OK,废话不多说,这一段时间我准备 把 一些项目中须要的功能收集整理一下。便于复习和查找。

大笑先写一个简单的二级联动,利用创建数组的方式。稍后我会更新其它的方式创建多级联动。

看看代码吧。

<!DOCTYPE html>
<html>
<head>
	<title>二级联动</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<script type="text/javascript">
	//创建二级分类数组
		var arr=[['请选择'],['请选择','天山折梅手','天山六阳掌','生死符'],['请选择','罗汉拳','拈花指','大日如来掌','易筋经'],['请选择','独孤九剑','六脉神剑','万剑归宗','拔刀术']];
		function getGongfu(){//封装函数
			var menpai=document.getElementsByName('menpai')[0];
			var gongfu=document.getElementsByName('wugong')[0];
			var mv=menpai.value;//获取选择的一级分类 
			var arrWG=arr[mv];//获取数组内容
			gongfu.options.length=arrWG.length;
			//注意JS中节点的属性名字 是复数 options
			for(var index in arrWG){//遍历循环
				gongfu.options[index].value=index;
				gongfu.options[0].selected="selected";
				gongfu.options[index].text=arrWG[index];
			}
		}
	</script>
</head>
	<body bgcolor="#abcdef">
		<select name="menpai" onchange="getGongfu();">
			<option value="0" selected="selected">请选择</option>
			<option value="1">逍遥派</option>
			<option value="2">少林寺</option>
			<option value="3">绝世剑法</option>
		</select>
		<select name="wugong">
		<option value="0" selected="selected">请选择</option>
		</select>
	</body>
</html>


原文地址:https://www.cnblogs.com/zfyouxi/p/4028194.html