用XML实现三级联动下拉列表框

最新推荐文章于 2022-09-23 17:53:24 发布

sugar88

最新推荐文章于 2022-09-23 17:53:24 发布

阅读量1.2k

点赞数

分类专栏： Web Standard 文章标签： xml function html border action table

本文链接：https://blog.csdn.net/sugar88/article/details/416766

版权

Web Standard 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

<!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>