select根据省份从xml文件里面读取城市信息的例子(兼容ff与ie)

来源:互联网 发布:阿里云 流量计费 编辑:程序博客网 时间:2024/06/11 22:22
<script type="text/javascript">    window.onload = function() {        /**        * 加载xml        */        function parseXML() {            var xmlhttp;            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari                xmlhttp = new XMLHttpRequest();            } else {// code for IE6, IE5                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");            }            xmlhttp.open("GET", "xml/city.xml", false);            xmlhttp.send();            xmlDoc = xmlhttp.responseXML;            return xmlDoc;        };                /**        *获得select的文本值        *这里采用这种做法的好处是为了兼容ie和ff        */        function getName(obj)        {           var index = obj.selectedIndex; // 选中索引           var text = obj.options[index].text;           return text;        }       /*        *如果城市里面已经有数据,就清空        *        */               function  initCity(cityLen,citys,citysSubElements)        {             if(cityLen>1)                 {                   for (var int2 = 1,l=cityLen; int2 < l; int2++)                    {                           var array_element = citysSubElements[1];                           citys.removeChild(array_element);                    }                }        }      /**      *添加城市      */       function addCity(arrayElement,citys)       {             for ( var int2 = 0, k = arrayElement.length; int2 < k; int2++)                    {                        var array_element = arrayElement[int2];                        //构造节点                        var cityOption = document.createElement("option");                        var txtNode = document                                .createTextNode(array_element.firstChild.nodeValue);                        cityOption.appendChild(txtNode);                                                                         //添加相应的节点                        citys.appendChild(cityOption);                    }              }                document.getElementById("provice").onchange = function()         {            //解析相应的xml            var doc = parseXML();            //获得城市列表            var provices = doc.getElementsByTagName("provice");                        //获得要显示的城市组件            var citys = document.getElementById("city");                                      var citysSubElements = citys.children;              var cityLen = citysSubElements.length;                                        // 初始化城市列表             initCity(cityLen,citys,citysSubElements)            for ( var int = 0, j = provices.length; int < j; int++)  //遍历省份列表             {                var array_element = provices[int];                                if (array_element.getAttributeNode("name").nodeValue == getName(this)) //查找到所需的省份                 {                                    //此处写法是为了兼容ie                    var arrayElement = array_element.children||array_element.childNodes;//查找到所需的城市()                                       addCity(arrayElement,citys);                                       break;                }            }        }    }</script><select id="provice">            <option>                请选择            </option>            <option>                辽宁            </option>            <option>                河南            </option>            <option>                广东            </option>        </select>        <select id="city">            <option>                请选择            </option>        </select><?xml version="1.0" encoding="GBK"?><china>    <provice name="辽宁">        <city>沈阳市</city>        <city>铁岭县</city>        <city>盘锦市</city>        <city>锦州市</city>    </provice>    <provice name="河南">        <city>郑州</city>        <city>南阳</city>        <city>焦作</city>        <city>新乡</city>    </provice>    <provice name="广东">        <city>深圳</city>        <city>珠海</city>        <city>东莞</city>        <city>梅州</city>    </provice></china> 


原创粉丝点击