//工具util.js实现,固定代码
function loadXMLDoc(dname) { try // Internet Explorer { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); } catch (e) { try // Firefox, Mozilla, Opera, etc. { xmlDoc = document.implementation.createDocument("", "", null); } catch (e) { alert(e.message) } } try { xmlDoc.async = false; xmlDoc.load(dname);//加载xml文档 return (xmlDoc); } catch (e) { alert(e.message) } return (null); }
//HTML页面实现部分
<html> <head> <script type="text/javascript" src="${pageContext.request.contextPath}/util.js"></script> </head> <body> <form action="" method="post"> <table boder="1" width="438"> <tr> <td>所在地(省、市):</td> <td>
<select name="province" id="province"></select>
<select name="city" id="city" ></select>
</td> </tr> </table> </form> <script type="text/javascript"> //从XML中读取文件 //页面加载完毕就要把省份读进去 window.onload = function(){ var stateSelectObj = document.getElementById("province"); var citySelectObj = document.getElementById("city"); //初始化:请选择 stateSelectObj.add(new Option("---请选择---","")); citySelectObj.add(new Option("---请选择---","")); //从xml中读取所有的省份,给stateSelect赋值 var xmlDoc = loadXMLDoc("LocList.xml"); var xmlStateNodes = xmlDoc.getElementsByTagName("State"); //遍历所有的省份 for(var i=0;i<xmlStateNodes.length;i++){ var xmlStateName = xmlStateNodes[i].getAttribute("Name"); stateSelectObj.add(new Option(xmlStateName,xmlStateName)); } //给省份select注册onchaange按钮 stateSelectObj.οnchange=function(){ //清空citySelectObj内容并初始化:请选择 citySelectObj.length=0; citySelectObj.add(new Option("---请选择---","")); if(this.value!=""){ for(var i=0;i<xmlStateNodes.length;i++){ var xmlStateName = xmlStateNodes[i].getAttribute("Name"); if(this.value==xmlStateName){ //调用该标签的getElementsByTagName方法,找到子标签 var xmlCityNodes = xmlStateNodes[i].getElementsByTagName("City"); for(var i=0;i<xmlCityNodes.length;i++){ var xmlCityName = xmlCityNodes[i].getAttribute("Name"); citySelectObj.add(new Option(xmlCityName,xmlCityName)); } } } } } } </script> </body> </html>
XML文件内容固定,在网上找的较全!基本格式如下:
<?xml version="1.0" encoding="UTF-8"?> <Location> <State Name="北京" Code="11"> <City Name="东城" Code="1" /> <City Name="西城" Code="2" /> <City Name="朝阳" Code="5" /> <City Name="丰台" Code="6" /> <City Name="石景山" Code="7" /> <City Name="海淀" Code="8" /> <City Name="门头沟" Code="9" /> <City Name="房山" Code="11" /> <City Name="通州" Code="12" /> <City Name="顺义" Code="13" /> <City Name="昌平" Code="21" /> <City Name="大兴" Code="24" /> <City Name="平谷" Code="26" /> <City Name="怀柔" Code="27" /> <City Name="密云" Code="28" /> <City Name="延庆" Code="29" /> </State>
JS实现从XML中获取省份和城市信息_二级联动
最新推荐文章于 2017-11-07 13:19:17 发布