``` //頁面布局 <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); ```