[JavaScript]解析XML动态获取省份市区

示例:
[JavaScript]解析XML动态获取省份市区_第1张图片
[JavaScript]解析XML动态获取省份市区_第2张图片

源码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> /* 注: 1 : 示例中不支持谷歌浏览器解析 2 : 清空市级所有列表时,要永远根据数组的第一个下标清空下拉列表数组 例如: for (var i = 0; i < cityLength; i++) { city.removeChild(cityItems[0]); } */ window.onload = function () { //选择省份后,onchange事件 document.getElementById("province").onchange = function () { //解析XML var xmlDoc = parseXML("city.xml"); //通过xmlDoc解析XML中province标签,返回值为数组 var provinces = xmlDoc.getElementsByTagName("province"); //获取下拉列表选中的值 var selectValue = this.value; //获取市级的下拉列表 var city = document.getElementById("city"); //获取市级的所有列表 var cityItems = city.getElementsByTagName("option"); //获取市级列表的长度 var cityLength = cityItems.length; //清空市级的所有列表 for (var i = 0; i < cityLength; i++) { //注:数组长度下标一定要写为0!! 每删除一个元素,下一个元素就成会为第一个 city.removeChild(cityItems[0]); } //在HTML中新建一个<option>下拉列表 var option = document.createElement("option"); //在HTML中新建一个文本节点 var text = document.createTextNode("请选择市区"); //在下拉列表中添加节点 option.appendChild(text); city.appendChild(option); //遍历XML子节点并在HTML添加对应的市级 for (var i = 0; i < provinces.length; i++) { //获取XML单个节点 var province = provinces[i]; //获取XML中<province>的name对应的值 var provinceName = province.getAttribute("name"); if (selectValue==provinceName) { //alert(selectValue+"-------"+provinceName); //获取该省的所有市,返回值为数组 var citys = province.getElementsByTagName("city"); //alert("citys.length="+citys.length); for (var i = 0; i < citys.length; i++) { //获取XML中每个<city>的文本内容 var text = citys[i].childNodes[0].nodeValue; //在HTML中新建一个<option>下拉列表 var optionElement = document.createElement("option"); //在HTML中新建一个文本节点 var textElement = document.createTextNode(text); //在下拉列表中添加节点 optionElement.appendChild(textElement); city.appendChild(optionElement); } } } }; //跨浏览器解析XML,返回值为XML文档对象 function parseXML(fileXmlName) { var xmlDoc = null ; try { //IE加载 xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); } catch (e) { try { //火狐等浏览器加载 xmlDoc = document.implementation.createDocument("","",null); } catch (e) { //谷歌浏览器加载 /*var xmlhttp = new window.XMLHttpRequest(); xmlhttp.open("GET",fileXmlName,false); xmlhttp.send(null); if(xmlhttp.readyState == 4){ xmlDoc = xmlhttp.responseXML.documentElement; }*/ } } //关闭异步加载 xmlDoc.async = false ; //加载xml文件 xmlDoc.load(fileXmlName); //返回XML文档对象 return xmlDoc; } } </script>
</head>
<body>
<select name="province" id="province">
    <option value="">请选择省份</option>
    <option value="河北省">河北省</option>
    <option value="湖南省">湖南省</option>
    <option value="浙江省">浙江省</option>
    <option value="北京市">北京市</option>
</select>
<select name="city" id="city">
    <option value="">请选择市区</option>
</select>
</body>
</html>

你可能感兴趣的:(JavaScript,mysql,android,javaweb,jquary)