JQuery实现省份三级下拉框功能(整理)

JQuery实现省份三级下拉框功能

网上有很多关于省份三级下拉框功能的实现代码,这次整理一份全的,直接上代码:

调用:

//绑定城市下拉选

$("#city_1").citySelect({
    prov:"北京",
    city:"东城区",
    dist:"",
    required:true,
    nodata:"none"
});

HTML:

     <div id="city_2">
                         <select class="prov"></select>
                         <select class="city" disabled="disabled"></select>
                         <select class="dist" disabled="disabled"></select>
                    </div>

js:

/*
 三级省市联动
settings 参数说明
-----
prov:默认省份
city:默认城市
dist:默认地区(县)
nodata:无数据状态
required:必选项
------------------------------ */
$.fn.citySelect=function(settings){
   
    if(this.length<1){ return;};
    // 默认值
    settings=$.extend({
        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.n+"'>"+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.s+"'>"+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.p+"'>"+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(
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值