js动态生成级联下拉列表

来源：互联网发布：linux除了vim 编辑：程序博客网时间：2024/04/30 15:56
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>级联选择器练习</title>    <script>        window.onload = function(){            var ojson=[{'province':'河北省','city':['石家庄','石家庄','石家庄','石家庄']},{'province':'河南省','city':['郑州','郑州','郑州','郑州']},{'province':'山东省','city':['青岛','青岛']}];            //1、为#province 添加onchange响应函数            document.getElementById('province').onchange = function(){                // alert('change');                /*                //把#city节点除第一个子节点外都移除                //2、加载cities.xml文件,得到代表文档的document对象                var xmlDoc = parseXml("cities.xml");                // xmlDoc.setProperty("SelectionLanguage", "XPath"); //注意这一句                //3、在cities.xml文档中查找和选择的省匹配的province节点                var provinces = xmlDoc.getElementsByTagName("province");                // alert(provinces.length);                var provinceVal = this.value;                alert(provinceVal);                var provinceEles =  xmlDoc.selectNodes("//province[@name='" + provinceVal +"']");                alert(provinceEles.length);                //4、在得到province节点的所有city子节点                //5、遍历city子节点，，得到每一个city子节点文本值                //6、利用得到的文本值创建option节点                //7、把6创建的option节点添加为#city的子节点        */                var cityNode = document.getElementById('city');                var cityOptionNodes = cityNode.getElementsByTagName('option');                alert(cityOptionNodes.length);                var len =  cityOptionNodes.length;                for (var i = 1; i < len; i++) {                    cityNode.removeChild(cityOptionNodes[1]);                }                for(var i = 0; i < ojson.length; i++){                    if(this.value == ojson[i].province){                        var ochild =  ojson[i].city;                        for(var j=0; j < ochild.length; j++){                            var childNode = document.createElement('option');                            childNode.value =   ochild[j];                            childNode.innerHTML =   ochild[j];                            cityNode.appendChild(childNode);                        }                    }                }            };            //js 解析xml文档函数，只支持ie            function parseXml(fileName){                var xmldoc;                try{                    //IE                    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");                }catch(e){                    ////Firefox, Mozilla, Opera, etc                    xmlDoc=document.implementation.createDocument("","",null);                    console.log(xmlDoc);                }                try{                    xmlDoc.async=false;                    xmlDoc.load(fileName);//chrome没有load方法                }catch(e){                    //针对Chrome,不过只能通过http访问,通过file协议访问会报错                    var xmlhttp = new window.XMLHttpRequest();                      xmlhttp.open("GET",fileName,false);                      xmlhttp.send(null);                      xmlDoc = xmlhttp.responseXML.documentElement;                 }                return xmlDoc;            }        }    </script></head><body>    <select name="province" id="province">        <option value="">请选择...</option>        <option value="河北省">河北省</option>        <option value="河南省">河南省</option>        <option value="山东省">山东省</option>    </select>    <select name="city" id="city">        <option value="...">请选择...</option>    </select></body></html>
0 0