根据XML用JS做级联操作
所有代码都是在写在JS中。首先，解析XML 、然后把XML中的内容放进页面中的select选项里。
XML文件：
<?xml version="1.0" encoding="utf-8"?><cities> <province name="北京"> <city>大兴</city> <city>昌平</city> <city>朝阳</city> <city>海淀</city> <city>东城</city> <city>西城</city> </province> <province name="河北"> <city>石家庄</city> <city>保定</city> <city>邢台</city> <city>张家口</city> <city>廊坊</city> <city>承德</city> </province> <province name="河南"> <city>郑州</city> <city>安阳</city> <city>平顶山</city> <city>开封</city> <city>商丘</city> <city>洛阳</city> </province> <province name="东北"> <city>哈尔滨</city> <city>辽宁</city> <city>吉林</city> <city>大连</city> <city>铁岭</city> <city>仕新</city> </province></cities>?
<body> <h1>解析xml文件实现省市级联下拉菜单</h1> <div> <span> <select id="province" name="province"> <option>请选择省</option> </select> </span> <span> <select id="cities" name="city"> <option>请选择相应省下面的市</option> </select> </span> </div></body>?
?
<script type="text/javascript"> window.onload = function(){ var xmlDom; try { //针对的是IE浏览器 创建一个空的微软 XML 文档对象 xmlDom = new ActiveXObject("Microsoft.XMLDOM"); } catch (err) { try { //在 Firefox 及其他浏览器中的 XML 解析器 //创建一个空的 XML 文档对象。 xmlDom = document.implementation.createDocument("", "", null); } catch (e) { } } //关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行 xmlDom.async = "false"; //解析器加载名为 "xxx.xml" 的 XML 文档、 xmlDom.load("city.xml"); //获取xml文件的根节点 var root = xmlDom.documentElement; //获取根节点下面的省节点 var provinces = root.childNodes; var province = document.getElementById("province"); for (var i = 0; i < provinces.length; i++) { //获取省节点的name属性的值 var name = provinces[i].getAttribute("name"); //创建一个option var opt = document.createElement("option"); //为option添加文本 opt.appendChild(document.createTextNode(name)); //添加到父节点中 province.appendChild(opt); } var cities = document.getElementById("cities"); province.onchange = function(){ var pce = document.getElementById("province"); var opts = pce.options; //根据下标获取选中的OPTION var opt1 = opts[pce.selectedIndex]; var name = opt1.innerHTML; for (var i = 0; i < provinces.length; i++) { //获取省节点的name属性的值 var name1 = provinces[i].getAttribute("name"); if (name == name1) { cities.length = 1;//每次改变的时候清空 var pros = provinces[i]; var citys = pros.childNodes; for (var j = 0; j < citys.length; j++) { //创建一个option var opt = document.createElement("option"); //为option添加文本 opt.appendChild(document.createTextNode(citys[j].text)); //添加到父节点中 cities.appendChild(opt); } } } } }</script>?