js实现省市三级联动选择框的代码共享

运行效果：

=================================================部分代码：=================================================当然首先你数据库中要有这个桌子，不然你没有数据.^_^ 复制代码代码如下： tr td class='tr pr10 '所在地： /td td类='tl '输入类型='隐藏' id='我的车'值='${user.provinceId}'/输入类型='隐藏' id='myCity '值='${user.cityId}'/输入类型='隐藏' id='myRegion '值=' $ { user。regionid } '/select id=' ProvinCesSelect ' name=' user。province ' c 3360 foreach items=' $ { xzqhs } ' var=' xzqh ' selected=' selected ' ' : ' ' } $ { xzqh。省份}/option/c : foreach/select select id=' city select ' name=' user。城市id '/select select id=' regionSelect ' name=' user。regionid '/select/TD TD class=' gray '/TD/tr js代码：复制代码代码如下： /** * 加载市* */function load city(){ var ProfeSsional id=$(' # ProfeSsional select options : selected ').val()；if(VirtuaL id==null | | VirtuaL id==' '){//alert('找不到省');}else{ $ .post(RootPath/' LoadCiTY '，{ 'q' : provinceId }，函数（数据，结果){ if(数据==' NonID '){ alert('请求错误');}else if(data=='null'){ alert('系统找不到属于该省的市');} else { data=eval(' { ' data ' } ')；var city select=$(' # city select ')；var myCity=$('#myCity ').val()；城市选择。html(" ")；for(var I=0；一。数据。长度；i ) { if(myCity！=null myCity！=' myCity 0 my city==data[I].id){城市选择。追加('所选选项='所选'值='数据[I]).id ' ' '数据[i].name '/option ')；} else { city select。追加('选项值='数据[I]).id ' ' '数据[i].name '/option ')；} } LoAdRegion()；} });} };/** * 加载区* */函数加载区域(){ var city id=$(' # city select options : selected ').val()；if(城市id==null | |城市id==' ' | |城市id 1){ alert('找不到市');}else{ $ .post(RootPath/LoadRegion '，{ 'q' : cityId }，函数（数据，结果){ if(数据==' NonID '){ alert('请求错误');}else if(data=='null'){ alert('系统找不到属于该市的区');} else { data=eval(' { ' data ' } ')；var regionSelect=$(' # regionSelect ')；var myRegion=$('#myRegion ').val()；区域选择。html(" ")；for(var I=0；一。数据。长度；i ) { if(myRegion！=null myRegion！=' my region 0 my region==data[I].id){ regionSelect。追加('所选选项='所选'值='数据[I]).id ' ' '数据[i].name '/option ')；} else { regionselect。追加('选项值=')数据[I].id ' ' '数据[i].name '/option ')；} } } });} };/** * 省改变事件* */$(' # ProvinCesSelect ').变更（装货城市);/** * 市改变事件* */$('#citySelect ').变更（加载区域);$(function(){ Loadcity()；});后台方法：复制代码代码如下： /** * 加载城市数据* */public void loadCity(){ if(q==null | | q . trim().equals(" " { write(" NOid ")；} else { ListXzqh city s=xzqhservice。query citys(q . trim())；if(city s==null | | city s . size()1){ write(' null ')；} else { StringBuilder builder=new StringBuilder('[')；适用于(Xzqh city : city s){ builder。追加(' { ' id ' : ' ')；建筑商。追加(城市。getcity id())；builder.append('，' name ' : ' ')；建筑商。追加(城市。getcity())；建筑商。追加(“}”，“”；} if(builder.length()1)builder。替换(生成器。length()-1，builder。length()，']')；write(构建器。tostring())；} } } /** * 加载区数据* */public void loadRegion(){ if(q==null | | q . trim().equals(" " { write(" NOid ")；} else { ListXzqh city s=xzqhservice。query districts(q . trim())；if(city s==null | | city s . size()1){ write(' null ')；} else { StringBuilder builder=new StringBuilder('[')；for (Xzqh区：城市){建设者。追加(' { ' id ' : ' ')；建筑商。追加(地区。getregionid())；builder.append('，' name ' : ' ')；建筑商。追加(地区。get region())；建筑商。追加(“}”，“”；} if(builder.length()1)builder。替换(生成器。length()-1，builder。length()，']')；write(构建器。tostring())；} } }