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

最新推荐文章于 2021-03-10 05:30:48 发布

php5921

最新推荐文章于 2021-03-10 05:30:48 发布

阅读量2.1k

点赞数

分类专栏： javascript 文章标签： PHP html 二级联动

本文链接：https://blog.csdn.net/php5921/article/details/26152669

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

吐舌头好久没写博客了，前段时间因为搬家，目前住的地方没有网络，就没有写博客了。找到了一个可以蹭网的地方给力。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" οnchange="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>

php5921

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
多级联动系列——数组二级联动

好久没写博客了，前段时间因为搬家，目前住的地方没有网络，就没有写博客了。找到了一个可以蹭网的地方给力。OK，废话不多说，这一段时间我准备把一些项目中需要的功能收集整理一下。便于复习和查找。先写一个简单的二级联动，利用创建数组的方式。稍后我会更新其他的方式创建多级联动。看看代码吧。二级联动 //创建二级分类数组 var arr=[['请选择'],['请选
复制链接

扫一扫