zoukankan      html  css  js  c++  java
  • 多级联动系列——数组二级联动

    吐舌头好久没写博客了,前段时间由于搬家,眼下住的地方没有网络,就没有写博客了。找到了一个能够蹭网的地方偷笑给力。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>


  • 相关阅读:
    golang html/template template.ParseFiles(filenames) 相对路径问题
    深入理解jvm jdk1,7(19)
    深入理解jvm jdk1,7(18)
    深入理解jvm jdk1,7(17)
    深入理解jvm jdk1,7(16)
    深入理解jvm jdk1,7(15)
    深入理解jvm jdk1,7(14)
    hugo 制作个人博客总结
    后台管理系统总结
    pageHelper(分页插件的使用)
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/4028194.html
Copyright © 2011-2022 走看看