省市区二级或三级联动特效

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 });
}
时不我待,不负韶华!立刻行动!不吃学习的苦就会吃生活的苦!
原文地址:https://www.cnblogs.com/zrp2013/p/3082943.html