select根據省份從xml文件裏面讀取城市信息的例子(兼容ff與ie)

<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> 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章