``` //页面布局 <div id="not3ssx"> <select name="province" class="prov dqxl" datatype="*" nullmsg="请选择地区！"></select> <select style="margin: 0 -6px;" name="city" class="city dqxl" disabled="disabled" datatype="*" nullmsg="请选择地区！"></select> <select name="area" class="dist dqxl" disabled="disabled" datatype="*" nullmsg="请选择地区！"></select> </div> ``` ***** ``` //调用 <script type="text/javascript"> $('#not3ssx').citySelect(); //或者 $('#not3ssx').citySelect({ prov: '广东省', city: '广州市', dist: '天河区' }); </script> ``` ***** ***** ``` //功能库 /*------------------------------- 三级省市联动 settings 参数说明 ----- url:省市数据josn文件路径 prov:默认省份 city:默认城市 dist:默认地区（县） nodata:无数据状态 required:必选项 ------------------------------ */ (function($){ $.fn.citySelect=function(settings){ if(this.length<1){return;}; // 默认值 settings=$.extend({ url:"city.json", prov:'请选择省份', city:'请选择城市', dist:'请选择地区', nodata:'none', 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); dist_obj.empty().removeAttr("datatype"); dist_obj.empty().removeAttr("nullmsg"); 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"); dist_obj.removeAttr("datatype"); dist_obj.removeAttr("nullmsg"); }else if(settings.nodata=="hidden"){ city_obj.css("visibility","hidden"); dist_obj.css("visibility","hidden"); dist_obj.attr("datatype","*"); dist_obj.attr("nullmsg","请选择区县"); }; 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"); dist_obj.removeAttr("datatype"); dist_obj.removeAttr("nullmsg"); }else if(settings.nodata=="hidden"){ dist_obj.css("visibility","hidden"); dist_obj.attr("datatype","*"); dist_obj.attr("nullmsg","请选择区县"); }; 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":""}); dist_obj.attr("datatype","*"); dist_obj.attr("nullmsg","请选择区县"); }; 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("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(); }; }; })(jQuery); ```