多级联动系列——数组二级联动
好久没写博客了,前段时间由于搬家,眼下住的地方没有网络,就没有写博客了。找到了一个能够蹭网的地方给力。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>