JavaScript解析xmlファイルの省都連動

12153 ワード
JavaScript
cities.xml

<china>
    <province name="   ">
        <city>  city>
        <city>   city>
        <city>  city>
        <city>  city>
        <city>  city>
    province>
    <province name="   ">
        <city>  city>
        <city>  city>
        <city>  city>
        <city>  city>
        <city>  city>
    province>
    <province name="   ">
        <city>  city>
        <city>  city>
        <city>  city>
        <city>  city>
        <city>  city>
    province>
china>    

<html>
    <head>
        <title>test01.htmltitle>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    head>
    <body>
        <select id="province" name="province">
            <option value="">   ....option>
            <option value="   ">   option>
            <option value="   ">   option>
            <option value="   ">   option>
        select>
        <select id="city" name="city">
            <option value="">   .....option>
        select>
    body>
    <script language="JavaScript">
        /**
         *        xml     
         * @param {Object} fileXmlName
         */
        function parseXML(fileXmlName){
            var xmlDoc;         
            try {//Internet Explorer        xml  
                xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            } 
            catch (e) {
                try {//Firefox, Mozilla, Opera,       xml  
                    xmlDoc = document.implementation.createDocument("", "", null);
                } 
                catch (e) {
                }
            }
            //      
            xmlDoc.async = false;
            //  xml  
            xmlDoc.load(fileXmlName);
            return xmlDoc;
        }

        //          onchange  
        document.getElementById("province").onchange = function(){
            //1             
            var provinceValue = document.getElementById("province").value;

            //2.  xml  
            var docXml = parseXML("cities.xml");

            //3.  xml      
            var provinceXmlElements = docXml.getElementsByTagName("province");

            //  
            /*
             * 
             */
            var cityElement = document.getElementById("city");
            var optionsOld = cityElement.getElementsByTagName("option");
//          for(var z=1;z
//              cityElement.removeChild(optionsOld[z]);
//          }

            for(var z=optionsOld.length-1;z>0;z--){
                cityElement.removeChild(optionsOld[z]);
            }
            //4   xml        
            for(var i = 0;ivar provinceXmlElement = provinceXmlElements[i];

                var provinceXmlValue = provinceXmlElement.getAttribute("name");
                //5            xml          
                if (provinceValue == provinceXmlValue) {
                    //6     ，             
                    var cityXmlElements = provinceXmlElement.getElementsByTagName("city");
                    for(var j=0;jvar cityXmlElement = cityXmlElements[j];

                        var cityXmlValue = cityXmlElement.firstChild.nodeValue;

                        //7               
                        /*
                         * 
                         */
                        var optionElement = document.createElement("option");
                        optionElement.setAttribute("value",cityXmlValue);
                        var cityText = document.createTextNode(cityXmlValue);
                        optionElement.appendChild(cityText);

                        cityElement.appendChild(optionElement);

                    }
                }
            }
        }




    script>
html>
Python Srapyのjsonトランスコード中国語処理1:コマンドライン方式