Posted on 2007-10-23 09:32
草 鞋 閱讀(828)
評論(0) 編輯 收藏 所屬分類:
JavaScript
<html>
<head>
<script language=javascript>
var depobj=["部門A:A001","部門B:B001"]; //定義兩個數據數組，部門和員工
var nameobj=["A00101:JACK:21","B00101:MACK:27"];
function bumenobj() {
var strdepobj;
for(i=0;i<depobj.length;i++)
{
strdepobj=depobj[i].split(":"); //用":"分隔出一個新的數組
slct=document.createElement("Option");
slct.value=strdepobj[1];
slct.text=strdepobj[0];
document.getElementById("dep").add(slct); //添加option
}
}
function myselect(depvalue)
{
//在部門(dep)下拉列表發生onchange事件,姓名(name)下拉列表先清空
//為了學習,這里有兩種有兩種清空方法
//一種是循環逐個刪除,一種是把姓名(name)的length設為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>
部門:
<select name=dep size=1 id=dep onchange=myselect(this.options.value)>
<option value=1>請選擇</option>
</select>
<p>
姓名:
<select name="name" id="name" size=1>
</select>
<p>
年齡:
<input id="age" type=text/>
</form>
</body>
</html>