JS二級(jí)聯(lián)動(dòng)菜單
Posted on 2007-10-23 09:32 草 鞋 閱讀(826) 評(píng)論(0) 編輯 收藏 所屬分類(lèi): JavaScript<html>
<head>
<script language=javascript>
var depobj=["部門(mén)A:A001","部門(mén)B:B001"]; //定義兩個(gè)數(shù)據(jù)數(shù)組,部門(mén)和員工
var nameobj=["A00101:JACK:21","B00101:MACK:27"];
function bumenobj() {
var strdepobj;
for(i=0;i<depobj.length;i++)
{
strdepobj=depobj[i].split(":"); //用":"分隔出一個(gè)新的數(shù)組
slct=document.createElement("Option");
slct.value=strdepobj[1];
slct.text=strdepobj[0];
document.getElementById("dep").add(slct); //添加option
}
}
function myselect(depvalue)
{
//在部門(mén)(dep)下拉列表發(fā)生onchange事件,姓名(name)下拉列表先清空
//為了學(xué)習(xí),這里有兩種有兩種清空方法
//一種是循環(huán)逐個(gè)刪除,一種是把姓名(name)的length設(shè)為0
//for(i=0;i<document.getElementById("name").options.length;i++){
// document.getElementById("name").options.remove(i);
//}
document.getElementById("name").length = 0
var strnameobj;
for (i=0;i<nameobj.length;i++){
strnameobj=nameobj[i].split(":");
if (depvalue==strnameobj[0].substring(0,4)){
slct=document.createElement("Option");
slct.value=strnameobj[0].substring(3,2);
slct.text=strnameobj[1];
document.getElementById("name").add(slct);
document.getElementById("age").value=strnameobj[2]
}
}
}
</script>
</head>
<body onload="bumenobj()">
<form name=myForm action="#" method="post">
<p>
部門(mén):
<select name=dep size=1 id=dep onchange=myselect(this.options.value)>
<option value=1>請(qǐng)選擇</option>
</select>
<p>
姓名:
<select name="name" id="name" size=1>
</select>
<p>
年齡:
<input id="age" type=text/>
</form>
</body>
</html>