<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>联动下拉列表框</title>
<script>
var dept_divi_sect='<DEPT_DIVI_SECT>'+
'<DEPT ID="0" NAME="太平洋">'+
'<DIVI ID="01" NAME="开发部">'+
'<SECT ID="011" NAME="项目组" />'+
'<SECT ID="012" NAME="维护组" />'+
'</DIVI>'+
'<DIVI ID="02" NAME="工程部">'+
'<SECT ID="021" NAME="系统组" />'+
'</DIVI>'+
'</DEPT>'+
'<DEPT ID="2" NAME="运输部">'+
'<DIVI ID="21" NAME="租船处">'+
'<SECT ID="211" NAME="租船一科" />'+
'<SECT ID="212" NAME="租船二科" />'+
'</DIVI>'+
'<DIVI ID="22" NAME="业务处">'+
'<SECT ID="221" NAME="业务科" />'+
'<SECT ID="222" NAME="使费科" />'+
'</DIVI>'+
'<DIVI ID="23" NAME="商务处">'+
'<SECT ID="231" NAME="运费科" />'+
'<SECT ID="232" NAME="保赔科" />'+
'</DIVI>'+
'<DIVI ID="24" NAME="安监处">'+
'<SECT ID="241" NAME="调度庢" />'+
'<SECT ID="242" NAME="海监科" />'+
'<SECT ID="243" NAME="航保科" />'+
'<SECT ID="244" NAME="综合科" />'+
'</DIVI>'+
'</DEPT>'+
'</DEPT_DIVI_SECT>';
/*选择部门
id是用于区分同一个页面里多组这样的联动下拉列表框*/
function ChooseDept(id)
{
var selDept;
if(id==0)
selDept=frmPrograms.selDept;
else
selDept=frmPrograms.selDept1;
//var sourceName = "./dept_divi_sect.php";
//用于生成xml的程序文件，
//这里我为了大家有一个直观的感觉，写了一段示例XML代替，
//如果要加载XML文件，下面就改用load()。
var source = new ActiveXObject('Microsoft.XMLDOM');
source.async = false;
//source.load(sourceName);
source.loadXML(dept_divi_sect);
root = source.documentElement;
sortFieldText=root.selectNodes("/DEPT_DIVI_SECT/DEPT/@NAME");
sortFieldValue=root.selectNodes("/DEPT_DIVI_SECT/DEPT/@ID");
var oOption = document.createElement('OPTION');
oOption.text = " 请选择 ";
oOption.value = "-1";
selDept.options.add(oOption);
for(var i=0;i<sortFieldText.length;++i)
{
var oOption = document.createElement('OPTION');
oOption.text = " "+sortFieldText[i].text+" ";
oOption.value = sortFieldValue[i].text;
selDept.options.add(oOption);
}
ChooseDivi(id);
}
/*选择处室*/
function ChooseDivi(id)
{
var selDept;
var selDivi;
if(id==0)
{
selDept=frmPrograms.selDept;
selDivi=frmPrograms.selDivi;
}
else
{
selDept=frmPrograms.selDept1;
selDivi=frmPrograms.selDivi1;
}
x=selDept.selectedIndex;
y=selDept.options[x].value;
sortFieldText=root.selectNodes("/DEPT_DIVI_SECT/DEPT[@ID='"+y+"']/DIVI/@NAME");
sortFieldValue=root.selectNodes("/DEPT_DIVI_SECT/DEPT[@ID='"+y+"']/DIVI/@ID");
for(var i=selDivi.options.length-1;i>=0;--i)
{
selDivi.options.remove(i)
}
var oOption = document.createElement('OPTION');
oOption.text = " 请选择 ";
oOption.value = "-1";
selDivi.options.add(oOption);
for(i=0;i<sortFieldText.length;++i)
{
var oOption = document.createElement('OPTION');
oOption.text = " "+sortFieldText[i].text+" ";
oOption.value = sortFieldValue[i].text;
selDivi.options.add(oOption);
}
ChooseSect(id);
}
/*选择科室*/
function ChooseSect(id)
{
var selDept;
var selDivi;
var selSect;
if(id==0)
{
selDept=frmPrograms.selDept;
selDivi=frmPrograms.selDivi;
selSect=frmPrograms.selSect;
}
else
{
selDept=frmPrograms.selDept1;
selDivi=frmPrograms.selDivi1;
selSect=frmPrograms.selSect1;
}
x1=selDept.selectedIndex;
y1=selDept.options[x1].value;
x2=selDivi.selectedIndex;
y2=selDivi.options[x2].value;
if(x2==0)
{
sortFieldText=root.selectNodes("/DEPT_DIVI_SECT/DEPT[@ID='"+y1+"']//SECT/@NAME");
sortFieldValue=root.selectNodes("/DEPT_DIVI_SECT/DEPT[@ID='"+y1+"']//SECT/@ID");
}
else
{
sortFieldText=root.selectNodes("/DEPT_DIVI_SECT/DEPT[@ID='"+y1+"']/DIVI[@ID='"+y2+"']/SECT/@NAME");
sortFieldValue=root.selectNodes("/DEPT_DIVI_SECT/DEPT[@ID='"+y1+"']/DIVI[@ID='"+y2+"']/SECT/@ID");
}
for(var i=selSect.options.length-1;i>=0;--i)
{
selSect.options.remove(i)
}
var oOption = document.createElement('OPTION');
oOption.text = " 请选择 ";
oOption.value = "-1";
selSect.options.add(oOption);
for(i=0;i<sortFieldText.length;++i)
{
var oOption = document.createElement('OPTION');
oOption.text = " "+sortFieldText[i].text+" ";
oOption.value = sortFieldValue[i].text;
selSect.options.add(oOption);
}
}
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="ChooseDept(0);ChooseDept(1)">
<form name="frmPrograms" method="post" action="">
<table width="100%" border="0" cellpadding="5" cellspacing="1">
<tr>
<td> <div align="left"> 部门名称
<select name="selDept" id="select2" onChange="ChooseDivi(0)">
</select>
<select name="selDept1" id="select" onChange="ChooseDivi(1)">
</select>
</div></td>
</tr>
<tr>
<td> 处室名称
<select name="selDivi" id="select4" onChange="ChooseSect(0)">
</select>
<select name="selDivi1" id="select3" onChange="ChooseSect(1)">
</select></td>
</tr>
<tr>
<td> 科室名称
<select name="selSect" id="select5">
</select>
<select name="selSect1" id="select6">
</select></td>
</tr>
</table>
</form>
</body>
</html>
|
本类阅读TOP10