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