JavaScript解析XML实现两级级联下拉列表

原创 2007年10月15日 16:27:00

 

1.创建测试XML文件:select.xml

<?xml version="1.0" encoding="GBK"?>
<select>
    
<province id="sx">
        陕西
        
<city id="xa">西安</city>
        
<city id="bj">宝鸡</city>
        
<city id="ak">安康</city>
    
</province>
    
<province id="js">
        江苏
        
<city id="nj">南京</city>
        
<city id="xz">徐州</city>
    
</province>
    
<province id="sh">
        上海
    
</province>
</select>

 

2.创建HTML页面:select.html

<body>

</body>
<script>
    
/*
     * @description 二级级联下拉
     * @author BluesLee
     * @lastModif BluesLee
     * @createDate 2007-10-13
     * @modifDate 2007-10-15
      * @version 1.0
     
*/

    SelectLevel.prototype.xml;
    SelectLevel.prototype.provinces;
    SelectLevel.prototype.parentName
="province";//父节点名称
    SelectLevel.prototype.childName="city";//子节点名称
    SelectLevel.prototype.keyName="id";//属性
    /*
     * 对象SelectLevel的构造器
     * @author BluesLee
     * @lastModif BluesLee
     * @createDate 2007-10-13
     * @modifDate 2007-10-15
      * @version 1.0
     
*/

    
function SelectLevel(parentName,childName,keyName){
        
if(parentName!=null && parentName!=""){
            
this.parentName=parentName;
        }

        
if(childName!=null && childName!=""){
            
this.childName=childName;
        }

        
if(keyName!=null && keyName!=""){
            
this.keyName=keyName;
        }

    }

    
/*
     * 加载xml文件
     * @author BluesLee
     * @lastModif BluesLee
     * @createDate 2007-10-13
     * @modifDate 2007-10-15
      * @version 1.0
     
*/

    SelectLevel.prototype.readXML
=function(url){
        
var selectXML;
        
//如果它受支持,采用标准的2级DOM技术
        if(document.implementation && document.implementation.createDocument){
            
//创建新的Document对象
            selectXML=document.implementation.createDocument("","",null);
            
//设置装载完毕时触发事件
            selectXML.onload=function(){
                alert(
"加载完成");
            }

            selectXML.load(url);
        }
else{//IE浏览器创建Document对象
            selectXML=new ActiveXObject("Microsoft.XMLDOM");
            
//设置onload
            selectXML.onreadystatechange=function(){
                
if(selectXML.readyState==4){
                    alert(
"加载完成");
                }

            }

            selectXML.load(url);
        }

        
this.xml=selectXML;
    }

    
/*
     * 遍历xml
     * @author BluesLee
     * @lastModif BluesLee
     * @createDate 2007-10-13
     * @modifDate 2007-10-15
      * @version 1.0
     
*/

    SelectLevel.prototype.iteratorXML
=function(node,level){
        
var n=node;
        
if(n==null){            
            n
=this.xml.documentElement;
        }


        
if(level==null){
            level
=0;
        }

        
if(n.nodeType==3){
            
for(var i=0;i<level;i++){
                document.write(
"-");
            }

            document.write(n.data.trim()
+"<br>");
        }
else{
            
for(var m=n.firstChild;m!=null;m=m.nextSibling){
                
this.iteratorXML(m,level+1);
            }

        }

    }

    
/*
     * 下拉联动
     * @author BluesLee
     * @lastModif BluesLee
     * @createDate 2007-10-13
     * @modifDate 2007-10-15
      * @version 1.0
     
*/
    
    SelectLevel.prototype.changeSelect
=function(){
        
var city=document.getElementById(this.childName);
        
var province=document.getElementById(this.parentName);
        city.options.length
=0;

        
if(province.value==null || province.value==""){
            city.options.length
=1;
            city.options[
0].text="请选择…";
            
return;
        }

        
        
var citys=this.provinces[this[province.value]].getElementsByTagName(this.childName);
        
if(citys.length==0){
            city.options.length
=city.options.length+1;
            city.options[city.options.length
-1].value=province.value;
            
for(var i=0;i<province.options.length;i++){
                
if(province.options[i].selected){
                    city.options[city.options.length
-1].text=province.options[i].text;
                    
return;
                }

            }
            
            
return;
        }

        city.options.length
=citys.length;
        
for(var i=0;i<citys.length;i++){
            city.options[i].value
=citys[i].getAttribute(this.keyName);
            city.options[i].text
=citys[i].firstChild.data.trim();
        }

    }

    
/*
     * 初始化下拉列表
     * @author BluesLee
     * @lastModif BluesLee
     * @createDate 2007-10-13
     * @modifDate 2007-10-15
      * @version 1.0
     
*/
    
    SelectLevel.prototype.init
=function(parent,province,city){
        
this.provinces=this.xml.getElementsByTagName(this.parentName);
        
var selectProvince=document.createElement("select");
        
var selectCity=document.createElement("select");
        
var obj=this;

        selectProvince.setAttribute(
"name",this.parentName);
        selectProvince.setAttribute(
"id",this.parentName);
        selectProvince.attachEvent(
"onchange",function(){obj.changeSelect();});
        selectProvince.options.length
=this.provinces.length+1;
        selectProvince.options[
0].text="请选择…";

        selectCity.setAttribute(
"name",this.childName);
        selectCity.setAttribute(
"id",this.childName);
        selectCity.options.length
=1;
        selectCity.options[
0].text="请选择…";
        
for(var i=0;i<this.provinces.length;i++){
            SelectLevel.prototype[
this.provinces[i].getAttribute(this.keyName)]=i;
            selectProvince.options[i
+1].value=this.provinces[i].getAttribute(this.keyName);
            selectProvince.options[i
+1].text=this.provinces[i].firstChild.data.trim();
            
if(this.provinces[i].getAttribute(this.keyName)==province){
                selectProvince.options[i
+1].selected=true;
                
var citys=this.provinces[i].getElementsByTagName(this.childName);                
                selectCity.options.length
=citys.length+1;
                
for(var j=0;j<citys.length;j++){
                    selectCity.options[j
+1].value=citys[j].getAttribute(this.keyName);
                    selectCity.options[j
+1].text=citys[j].firstChild.data.trim();
                    
if(citys[j].getAttribute(this.keyName)==city){
                        selectCity.options[j
+1].selected=true;
                    }

                }

            }

        }

        parent.appendChild(selectProvince);
        parent.appendChild(selectCity);
    }


    String.prototype.trim
=function(){        
        
return this.replace(/^s*/g,"").replace(/s*$/g,"");
    }

    
//测试
    var newXML=new SelectLevel();
    newXML.readXML(
"select.xml");
    
//newXML.iteratorXML(null,-2);
    newXML.init(document.body,"sx","bj");
</script>

 

js动态生成级联下拉列表

级联选择器练习 window.onload = function(){ var ojson=[{'province':'河北省...
  • lhb_11
  • lhb_11
  • 2017年04月19日 15:19
  • 1054

javascript做省市级联的下拉列表

object.options.add(new Option(label,value))方法向集合里添加一项option对象; object.options.remove(index)方法移除optio...
  • xtfge0915
  • xtfge0915
  • 2015年05月08日 11:37
  • 979

利用ajax实现二级联动下拉框

下拉框二级联动,用ajax来实现是已经非常成熟的技术了。但对于我这个java菜鸟来说,真的是费了九牛二虎之力,各种百度,各种测试。终于得以实现。代码相对于网上的容易理解些。现把代码和我在编写的过程中遇...
  • qq_35778289
  • qq_35778289
  • 2016年08月04日 15:19
  • 511

js解析XML文件,并将城市显示在下拉列表,选中城市后出现城市介绍

在群上看到有人问问题,就闲着没事做了一下
  • u011193139
  • u011193139
  • 2014年07月29日 12:25
  • 934

【JSP案例】无限级联|下拉列表

本案例主要通过无限级联的数据结构来设计下拉列表 效果图: 1)设计无限级联数据库,并赋值 设计Id和ParentId字段,根类Id通过子类的ParentId来寻找,比如计算机是根类,他的...
  • czk_love_wyq
  • czk_love_wyq
  • 2014年12月22日 11:00
  • 1013

jquery之动态级联下拉列表

在制作HTML页面的时候,难免会遇到级联下拉列表的显示。比如最常见的 “省---市” 级联下拉列表。   下面贴出来我的实现方式,供大家参考一下(用的是jquery)。   首先是运行结果: ...
  • xiaoyu966
  • xiaoyu966
  • 2014年05月09日 10:32
  • 2665

级联下拉菜单的实现

最近在项目中用到了级联菜单,在网上查过资料后,大概有两种实现思路: 1.下拉列表中的数据从数据库中自动获取 2.下拉列表中的每一个选项都写在代码中     相信我们都会选择第一种方法,这样不仅增...
  • yiwangxiblog
  • yiwangxiblog
  • 2016年07月28日 10:24
  • 573

Ajax 实现级联下拉框

级联下拉框随处可见,最常见的就是省市的级联,在选择省份后,对应的区县的下拉选择列表的下拉选择内容也会发生相应改变,即所谓的级联下拉框。这种页面异步刷新,无可厚非,AJax是首选。 在做一个管理系统时...
  • sdvjbc
  • sdvjbc
  • 2016年05月12日 13:19
  • 737

【WPF】两个下拉列表ComboBox的级联

两个ComboBox的级联
  • qq_18995513
  • qq_18995513
  • 2016年11月23日 12:20
  • 2024

Ajax实现下拉框二级级联

AJAX实现的简单的无刷新效果,页面中有两个下拉框,当第一个下拉框改变时,提交请求到后台,查找到对应的数据,添加到第二个下拉框列表里。代码如下: //Ajax实现下拉框二级级联,...
  • u011518709
  • u011518709
  • 2013年09月05日 14:05
  • 4541
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript解析XML实现两级级联下拉列表
举报原因:
原因补充:

(最多只允许输入30个字)