Javascript级联操作代码

最新推荐文章于 2022-05-21 18:07:15 发布

zlchina1989

最新推荐文章于 2022-05-21 18:07:15 发布

阅读量490

点赞数

分类专栏： Javascript 文章标签： javascript function encoding server xml 文档

本文链接：https://blog.csdn.net/zlchina1989/article/details/5620747

版权

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

js.js

var xmlDoc; function cleanData(getObj) { if(getObj) { getObj.options.length = 0; } } function getxmlDoc() { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async=false; xmlDoc.load("data.xml"); if(xmlDoc.parseError.errorCode!=0) { var myErr=xmlDoc.parseError; alert("出错！"+myErr.reason); } } function InitData() { getxmlDoc(); var selectElement1=document.getElementById("Select1"); var selectElement2=document.getElementById("Select2"); cleanData(selectElement1); cleanData(selectElement2); var TopNodes = xmlDoc.getElementsByTagName("Root")[0].childNodes; if(TopNodes.length>0) { var College; var Department; for(var i=0;i<TopNodes.length;i++) { //添加列表项目 College=TopNodes[i]; var createOption=document.createElement("option"); createOption.value=College.getAttribute("id"); createOption.text=College.getAttribute("name"); selectElement1.add(createOption); } if(TopNodes[0].childNodes.length>0) { for(var j=0 ; j<TopNodes[0].childNodes.length;j++) { Department=TopNodes[0]; var createOption=document.createElement("option"); createOption.value=Department.childNodes[j].getAttribute("id"); createOption.text=Department.childNodes[j].getAttribute("name"); selectElement2.add(createOption); } } } } function selectCollege() { var selectElement1=document.getElementById("Select1"); var id=selectElement1.options[selectElement1.selectedIndex].value; var CollegeNodes=xmlDoc.selectSingleNode("//Root/college[@id="+id+"]"); var department=document.getElementById("Select2"); cleanData(department); if(CollegeNodes.childNodes.length>0) { for(var i=0;i<CollegeNodes.childNodes.length;i++) { var departmentNode=CollegeNodes.childNodes[i]; var fullOption=document.createElement("option"); fullOption.value=departmentNode.getAttribute("id"); fullOption.text=departmentNode.getAttribute("name"); department.add(fullOption); } } }

data.xml

<?xml version="1.0" encoding="utf-8" ?><Root> <college name="信息工程学院" id="01"> <department name="计算机系" id="0101"></department> <department name="电子系" id="0102"></department> <department name="机械系" id="0103"></department> </college> <college name="其他" id="02"> <department name="其他" id="0201"></department> <department name="特别" id="0202"></department> </college></Root>

page.html

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>xml的下拉菜单联动</title> <mce:script language="javascript" type="text/javascript" src="js.js" mce_src="js.js"></mce:script></head><body οnlοad="InitData();"> <form id="form1" runat="server"> <div> <select id="Select1" οnchange="selectCollege()"></select> <select id="Select2"></select> </div> </form></body></html>