佛山软件定制

用javascript实现网页地区选择功能

页面中引用DQloader.js,先看下在Html中是怎么写的

<!DOCTYPE html/>
<html>
<head>
    <title>地区加载JS示例代码 power by www.ops.cc </title>
<script type="text/javascript" src="/scripts/DQLoader.js"></script>
    <script type="text/javascript">
     window.onload=function(){   
          var c=new DQLoader({
                pe: document.getElementById("p"),               //省select
                ce: document.getElementById("c"),               //市select
                ae: document.getElementById("a"),               //区select
                data:new Array('福建省','厦门市','海沧区'),     //默认值
                defaultText:null,                               //未选择的文字说明:如:请选择
                func:function(x){                               //回执函数,x为返回的结果
                    var name=x.pname+","+x.cname+","+x.aname;
                    var id=x.pid+","+x.cid+","+x.aid;
                    //选取之后隐藏
                    alert('获取的地区为:'+name+'\r\n获取的地区ID:'+id);
                }
               });
            //初始化
            c.init();
      }
    </script>
</head>
<body>
<select id="p">
<option>不限</option>
</select>省<select id="c"><option>不限</option></select>市
<select id="a"><option>不限</option></select>(区/县)
</body>
</html>

 

DQLoader.js内置全国的区域数据

DQLoader.js对地区数据操作的代码如下:

 

/*
 * DQLoader.js 地区加载
 * Copyright 2010 OPS,All rights reseved!
 * author : newmin  http://b.ops.cc
 * date   : 2010/11/25
 */
 
 var _script=document.createElement("script");
 _script.type="text/javascript";
 _script.src="DQdata.js";
 var _$header=document.getElementsByTagName("head")[0];
 _$header.insertBefore(_script,_$header.childNodes[0]);
 
/* USE Global variable DQdata; */
function DQLoader(data){
 /*
  * data format:{pe:*,ce:*,ae:*,value:'',defaultText:'请选择',func}
  * pe:province element
  * ce:city element
  * ae:area element
  */
 this.pe=data.pe;
 this.ce=data.ce;
 this.ae=data.ae;
 this.defaultText=data.defaultText;
 this.data=data.data;
 this.func=data.func;
}
DQLoader.prototype.init=function(){
       var  _t=this;
        /************* 定义填充Dom方法 ************************/
       var fill=function(elem,data){
                /* 添加dom方法 */
                var f=function(value,text){
                    var opt=document.createElement("option");
                    opt.setAttribute("value",value);
                    opt.innerHTML=text;
                    elem.appendChild(opt);
                };
                /* 清空option */
                elem.innerHTML="";
                /* 加载默认值 */
                if(_t.defaultText){f('',_t.defaultText);}
                /* 加载数据 */
                for(var i in data)f(data[i].id,data[i].name);
        };
        /*********** 为Elements添加onchange事件****************/ 
        this.pe.onchange=function(){fill(_t.ce,_t.defaultText&&this.selectedIndex==0?null:DQdata[_t.defaultText?this.selectedIndex-1:this.selectedIndex].citys); _t.ce.onchange();};
        this.ce.onchange=function(){fill(_t.ae,_t.defaultText&&this.selectedIndex==0?null:DQdata[_t.defaultText?_t.pe.selectedIndex-1:_t.pe.selectedIndex].citys[_t.defaultText?this.selectedIndex-1:this.selectedIndex].dis);_t.ae.onchange();};
        this.ae.onchange=function(){
            if(_t.func){
                /* 获取选择的结果 */
                var result={
                pid:_t.pe.options[_t.pe.selectedIndex].value,
                pname:_t.pe.options[_t.pe.selectedIndex].innerHTML,
                cid:_t.ce.options[_t.ce.selectedIndex].value,
                cname:_t.ce.options[_t.ce.selectedIndex].innerHTML,
                aid:_t.ae.options[_t.ae.selectedIndex].value,
                aname:_t.ae.options[_t.ae.selectedIndex].innerHTML
                };
                _t.func(result);
            }
        };
        /************* 初始化数据 *********************/
        fill(this.pe,DQdata);
        if(!this.data)this.pe.onchange();
        else{
            for(var i=0;i<DQdata.length;i++){
                /* 设置pe状态 */
                if(this.data[0]==DQdata[i].name){
                    this.pe.value=DQdata[i].id;
                    this.pe.onchange();
                    /* 设置ce状态 */
                    for(var j=0;j<DQdata[i].citys.length;j++){ 
                      if(this.data[1]==DQdata[i].citys[j].name){
                        this.ce.value=DQdata[i].citys[j].id;
                        this.ce.onchange();
                         /* 设置ae状态 */
                        for(var k=0;k<DQdata[i].citys[j].dis.length;k++){
                            if(this.data[2]==DQdata[i].citys[j].dis[k].name){
                                this.ae.value=DQdata[i].citys[j].dis[k].id;
                                this.ae.onchange();
                            }
                        }
                       }
                    }
                }
            }
        }
        
}



我将代码压缩到了一个单文件中, 你可以点击以下链接下载源代码和压缩后的代码


本地下载    OPS网站下载


原创文章转载请注明链接地址:http://www.ops.cc/newmin/archive/2010/11/26/js-area-loader.html


 


 







        

        

            posted on 
2010-11-26 17:11 
New.min 
阅读(940) 
评论(2) 
编辑 
收藏 
举报

        

    










    
    

    
    

    

        

    

        

            
                
                
            
        

    

    

    

    





            

        

        

            

导航