Posted on 2007-10-23 09:32
草 鞋 阅读(823)
评论(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>