js动态生成级联下拉列表

最新推荐文章于 2025-03-17 16:51:49 发布

baidu_27301643

最新推荐文章于 2025-03-17 16:51:49 发布

阅读量1.3k

点赞数 1

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/baidu_27301643/article/details/56290454

版权

js 专栏收录该内容

3 篇文章

订阅专栏

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