ajax学习笔记5
|
写一个js对xml的解析，做一个select的2级联动，很用的，以后只要改xml文件就行了 <!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type"content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> window.onload = function() { var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");//创建微软的解析器 var provinceElement = document.getElementById("province"); var cityElement = document.getElementById("city");//获取省和城市的下俩列表元素节点 xmlDoc.async = "false";//设置异步关闭 xmlDoc.load("fish.xml");//加载xml var txt = xmlDoc.getElementsByTagName("province");//获取xml标签名字 for ( var i = 0; i < txt.length; i++) {//可以获取xml里面属性 var name = txt[i].getAttribute("name"); var p = document.createElement("option");//创建option元素节点 p.appendChild(document.createTextNode(name));//创建文本节点 province.appendChild(p);//挂载节点到第一个下拉表中 } provinceElement.onchange = function() { var selectprovinceElement =provinceElement[provinceElement.selectedIndex]; //alert(selectprovinceElement.value); var selectValue = selectprovinceElement.value;//获取选中元素的值 cityElement.length=1;//这句话很重要。为了下次点击的时候，将上次的select里面的option清除 for ( var i = 0; i < txt.length; i++) { var name = txt[i].getAttribute("name");//再一次或得xml的省份 if (name == selectValue) {//如果相等就读取省下的子节点 var city = txt[i].childNodes;//获取该节点的孩子节点 for ( var j = 0; j < city.length; j++) { var optionElement = document.createElement("option"); //city[j].childNodes[0].nodeValue;//获取xml省下的所有子节点 var optionTextElement = document .createTextNode(city[j].childNodes[0].nodeValue);//创建一个文本节点 optionElement.appendChild(optionTextElement); cityElement.appendChild(optionElement);//跟第一次样 } } } } } </script> </head> <body> <select id="province"> <option>--请选择省--</option> </select> <select id="city"> <option>--请选择市--</option> </select> </body> </html>
Xml文件 fish.Xml <?xmlversion="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> </province>
</cities> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |