zoukankan      html  css  js  c++  java
  • 省市区二级或三级联动特效

    1.http://zrpyun.sinaapp.com/jqueryplugs/citys.html

    注:本地地址测试的话ie跟谷歌不兼容,故需放到http://开头的主机上访问

    2.最新的特效(好用)http://www.helloweba.com/view-blog-188.html(注意,它这个value值直接是省市名称,这样不太好,以下是自己改进过的,value值是省市的id)

    (1)生成省市id对应的城市表citys.sql:(根据city.min.js里的json格式自己生成城市表入库,以下是生成好了的

      下载地址:http://url.cn/QoA6XN

    (2)重新生成一遍city.min.js,使之带上pid、cid、sid:

      下载地址:http://url.cn/RrCF5e

    (3)将jquery.cityselect.js中的内容单独提出来并修改了value值对应的值,放在html页面中,因为涉及到一个city.min.js路径的一个问题

      var res = "{weiwin::RES}";//这个是THINKPHP中的一个路径,具体的示框架进行修改
        $(function(){
            //省市二级联动
            $.fn.citySelect=function(settings){
                if(this.length<1){return;};
    
                // 默认值
                settings=$.extend({
                    url:res+"/js/city.min.js",//这个url是绝对路径,注意修改
                    prov:null,
                    city:null,
                    dist:null,
                    nodata:null,
                    required:true
                },settings);
    
                var box_obj=this;
                var prov_obj=box_obj.find(".prov");
                var city_obj=box_obj.find(".city");
                var dist_obj=box_obj.find(".dist");
                var prov_val=settings.prov;
                var city_val=settings.city;
                var dist_val=settings.dist;
                var select_prehtml=(settings.required) ? "" : "<option value=''>请选择</option>";
                var city_json;
    
                // 赋值市级函数
                var cityStart=function(){
                    var prov_id=prov_obj.get(0).selectedIndex;
                    if(!settings.required){
                        prov_id--;
                    };
                    city_obj.empty().attr("disabled",true);
                    dist_obj.empty().attr("disabled",true);
    
                    if(prov_id<0||typeof(city_json.citylist[prov_id].c)=="undefined"){
                        if(settings.nodata=="none"){
                            city_obj.css("display","none");
                            dist_obj.css("display","none");
                        }else if(settings.nodata=="hidden"){
                            city_obj.css("visibility","hidden");
                            dist_obj.css("visibility","hidden");
                        };
                        return;
                    };
                    
                    // 遍历赋值市级下拉列表
                    temp_html=select_prehtml;
                    $.each(city_json.citylist[prov_id].c,function(i,city){
                        temp_html+="<option value='"+city.cid+"'>"+city.n+"</option>";
                    });
                    city_obj.html(temp_html).attr("disabled",false).css({"display":"","visibility":""});
                    distStart();
                };
    
                // 赋值地区(县)函数
                var distStart=function(){
                    var prov_id=prov_obj.get(0).selectedIndex;
                    var city_id=city_obj.get(0).selectedIndex;
                    if(!settings.required){
                        prov_id--;
                        city_id--;
                    };
                    dist_obj.empty().attr("disabled",true);
    
                    if(prov_id<0||city_id<0||typeof(city_json.citylist[prov_id].c[city_id].a)=="undefined"){
                        if(settings.nodata=="none"){
                            dist_obj.css("display","none");
                        }else if(settings.nodata=="hidden"){
                            dist_obj.css("visibility","hidden");
                        };
                        return;
                    };
                    
                    // 遍历赋值市级下拉列表
                    temp_html=select_prehtml;
                    $.each(city_json.citylist[prov_id].c[city_id].a,function(i,dist){
                        temp_html+="<option value='"+dist.sid+"'>"+dist.s+"</option>";
                    });
                    dist_obj.html(temp_html).attr("disabled",false).css({"display":"","visibility":""});
                };
    
                var init=function(){
                    // 遍历赋值省份下拉列表
                    temp_html=select_prehtml;
                    $.each(city_json.citylist,function(i,prov){
                        temp_html+="<option value='"+prov.pid+"'>"+prov.p+"</option>";
                    });
                    prov_obj.html(temp_html);
    
                    // 若有传入省份与市级的值,则选中。(setTimeout为兼容IE6而设置)
                    setTimeout(function(){
                        if(settings.prov!=null){
                            prov_obj.val(settings.prov);
                            cityStart();
                            setTimeout(function(){
                                if(settings.city!=null){
                                    city_obj.val(settings.city);
                                    distStart();
                                    setTimeout(function(){
                                        if(settings.dist!=null){
                                            dist_obj.val(settings.dist);
                                        };
                                    },1);
                                };
                            },1);
                        };
                    },1);
    
                    // 选择省份时发生事件
                    prov_obj.bind("change",function(){
                        cityStart();
                    });
    
                    // 选择市级时发生事件
                    city_obj.bind("change",function(){
                        distStart();
                    });
                };
    
                // 设置省市json数据
                if(typeof(settings.url)=="string"){
                    $.getJSON(settings.url,function(json){
                        city_json=json;
                        init();
                    });
                }else{
                    city_json=settings.url;
                    init();
                };
            };

    (4)调用

    
    

      <div id="city_1">
        <select class="prov" id="pid"></select>
        <select class="city" id="cid" disabled="disabled"></select>

       
      <!--如果是三级联动的话,把下面的区也加上,否则二级的话就去掉下面这行-->
      <select
     class="dist" id="sid" disabled="disabled"></select> 

      </div>


    var pid = '{weiwin:$info.pid}';//这个是为了查询时保持默认的省份id var cid = '{weiwin:$info.cid}';//
    这个是为了查询时保持默认的城市id
    //当省份id为真时,设置默认的城市
    if(pid){
      $("#city_1").citySelect({prov:pid, city:cid});
    }else{
      $("#city_1").citySelect({ nodata:"none", required:false });
    }
    时不我待,不负韶华!立刻行动!不吃学习的苦就会吃生活的苦!
  • 相关阅读:
    四种常用正则表达式
    解读tomcat的server.xml文件
    存储过程与函数的区别
    Servlet如何处理一个请求?
    Oracle归档模式相关
    常用几个Struts2标签
    Js中比较时间大小
    传值出现中文乱码问题
    JAVA常用转义符
    HDU 5967(LCT)
  • 原文地址:https://www.cnblogs.com/zrp2013/p/3082943.html
Copyright © 2011-2022 走看看