省市区二级或三级联动特效
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 });
}
时不我待,不负韶华!立刻行动!不吃学习的苦就会吃生活的苦!