联动条

来源：互联网发布：a8拍霸软件编辑：程序博客网时间：2024/06/10 03:28

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
<script language="javascript">
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
function $(id){
  return document.getElementById(id);
}
function loadXML(url,handler) {

  xmlDoc.onreadystatechange=function(){
   if(xmlDoc.readyState==4) handler(xmlDoc);
  }
  xmlDoc.load(url);
}
//初始化区级机构
function initDepartment(xmlDoc){
  var depts=xmlDoc.getElementsByTagName("dept");
  for(var i=0;i<depts.length;i++){
   var dept=depts[i];
   if(dept.getAttribute("level")=="1"){
    getSection(dept);
   }
  }
}
//区
function getSection(nodeData){
  displayDeptartment("sectionDevId",nodeData);
}
//部
function getDepart(){
  getDepartment("departSelId","departDevId","sectionSelId");
}
//部
function getGroup(){
  getDepartment("groupSelId","groupDevId","departSelId");
}
function getDepartment(selId,devId,upSelId){
  clearOpt($(selId));
  var groupSel=$(upSelId);
  var opts=groupSel.options;
  for(var i=0;i<opts.length;i++){
   if(opts[i].selected){
    var upDeptNo=opts[i].value;
    var depts=xmlDoc.getElementsByTagName("dept");
    for(var i=0;i<depts.length;i++){
     var dept=depts[i];
     if(dept.getAttribute("parentDeptNo")==upDeptNo){
      displayDeptartment(devId,dept);
     }
    }
    return;
   }
  }
}
function clearOpt(selNode){
  var opts=selNode.options;
  var len=opts.length;
  for(var i=1;i<len;i++){
   opts[0].parentNode.removeChild(opts[opts.length-1]);
  }
}
function displayDeptartment(deptDev,deptData){
  var sectionDev=$(deptDev);
  var deptNo=deptData.getElementsByTagName("deptNo")[0].firstChild.data;
  var deptName=deptData.getElementsByTagName("deptName")[0].firstChild.data;
  var optionDev=document.createElement("option");
  optionDev.value=deptNo;
  optionDev.innerHTML=deptName;
  sectionDev.firstChild.appendChild(optionDev);
}
/*
function init(){
  var sectionDev=$("sectionDevId");
  var optionDev=document.createElement("option");
  optionDev.value="01";
  optionDev.innerHTML="haha";
  var optionDev2=document.createElement("option");
  optionDev2.value="02";
  optionDev2.innerHTML="hehe"
  sectionDev.firstChild.appendChild(optionDev);
  sectionDev.firstChild.appendChild(optionDev2);

  alert("ok");
}
function printValue(){
  var ss=$("sectionSelId");
  var opts=ss.options;
  for(var i=1;i<opts.length;i++){
   if(opts[i].selected==true){
    alert(opts[i].value);
   }
  }
}
*/
</script>
</head>
<body onLoad="loadXML(location.search.substring(1),initDepartment);">
<form name="testForm" method="post" action="">
<table width="600" border="0">
    <tr>
      <td>
   <div id="sectionDevId">
   <select id="sectionSelId" onChange="getDepart();">
    <option>--请选择--</option>
   </select>
  </div>
   </td>
      <td>区</td>
      <td>
  <div id="departDevId">
   <select id="departSelId" onChange="getGroup();">
    <option>--请选择--</option>
   </select>
  </div>
   </td>
      <td>部</td>
      <td>
   <div id="groupDevId">
   <select id="groupSelId">
    <option>--请选择--</option>
   </select>
  </div>
   </td>
      <td>组</td>
    </tr>
</table>
</form>
</body>
</html>