js實現(xiàn)一個省市區(qū)三級聯(lián)動選擇框代碼分享

更新時間：2013年03月06日 10:43:44 作者：

省市區(qū)三級聯(lián)動在填寫表單時有關地址這一塊顯得尤為重要,直接提高了用戶的填寫速度與準確度，接下來本文使用js代碼實現(xiàn)一個，感興趣的你可以參考下希望可以幫助到你

運行效果：

=================================================
部分代碼：
=================================================
當然首先你數(shù)據(jù)庫中要有這個table，不然你沒有數(shù)據(jù).....^_^

復制代碼代碼如下:

 
<tr> 
<td class="tr pr10 "> 
所在地: 
</td> 
<td class="tl"> 
<input type="hidden" id="myProvince" value="${user.provinceId}"/> 
<input type="hidden" id="myCity" value="${user.cityId}"/> 
<input type="hidden" id="myRegion" value="${user.regionId}"/> 
<select id="provinceSelect" name="user.provinceId"> 
<c:forEach items="${xzqhs}" var="xzqh"> 
<option value="${xzqh.provinceId}" ${user.regionId eq xzqh.provinceId?"selected='selected'":""}>${xzqh.province}</option> 
</c:forEach> 
</select> 
<select id="citySelect" name="user.cityId"> 
</select> 
<select id="regionSelect" name="user.regionId"> 
</select> 
</td> 
<td class="gray"></td> 
</tr> 

js代碼：

復制代碼代碼如下:

 
/** 
* 加載市 
* 
*/ 
function loadCity() { 
var provinceId = $("#provinceSelect option:selected").val(); 
if(provinceId == null || provinceId == ""){ 
//alert("找不到省"); 
}else{ 
$.post(rootPath+"/loadCity", { 
"q" : provinceId 
}, function(data, result) { 
if(data == "noId"){ 
alert("請求錯誤"); 
}else if(data == "null"){ 
alert("系統(tǒng)找不到屬于該省的市"); 
}else{ 
data = eval("{" + data + "}"); 
var citySelect = $("#citySelect"); 
var myCity = $("#myCity").val(); 
citySelect.html(""); 
for ( var i = 0; i < data.length; i++) { 
if(myCity != null && myCity != "" && myCity > 0 && myCity == data[i].id){ 
citySelect.append("<option selected='selected' value='" + data[i].id + "'>" 
+ data[i].name + "</option>"); 
}else{ 
citySelect.append("<option value='" + data[i].id + "'>" 
+ data[i].name + "</option>"); 
} 
} 
loadRegion(); 
} 
}); 
} 
}; 
/** 
* 加載區(qū) 
* 
*/ 
function loadRegion() { 
var cityId = $("#citySelect option:selected").val(); 
if(cityId == null || cityId == "" || cityId < 1){ 
alert("找不到市"); 
}else{ 
$.post(rootPath+"/loadRegion", { 
"q" : cityId 
}, function(data, result) { 
if(data == "noId"){ 
alert("請求錯誤"); 
}else if(data == "null"){ 
alert("系統(tǒng)找不到屬于該市的區(qū)"); 
}else{ 
data = eval("{" + data + "}"); 
var regionSelect = $("#regionSelect"); 
var myRegion = $("#myRegion").val(); 
regionSelect.html(""); 
for ( var i = 0; i < data.length; i++) { 
if(myRegion != null && myRegion != "" && myRegion > 0 && myRegion == data[i].id){ 
regionSelect.append("<option selected='selected' value='" + data[i].id + "'>" 
+ data[i].name + "</option>"); 
}else{ 
regionSelect.append("<option value='" + data[i].id + "'>" 
+ data[i].name + "</option>"); 
} 
} 
} 
}); 
} 
}; 
/** 
* 省改變事件 
* 
*/ 
$("#provinceSelect").change(loadCity); 
/** 
* 市改變事件 
* 
*/ 
$("#citySelect").change(loadRegion); 

$(function() { 
loadCity(); 
}); 

后臺方法：

復制代碼代碼如下:

 
/** 
* 加載城市數(shù)據(jù) 
* 
*/ 
public void loadCity() { 
if (q == null || q.trim().equals("")) { 
write("noId"); 
} else { 
List<Xzqh> citys = xzqhService.queryCitys(q.trim()); 
if (citys == null || citys.size() < 1) { 
write("null"); 
} else { 
StringBuilder builder = new StringBuilder("["); 
for (Xzqh city : citys) { 
builder.append("{'id':'"); 
builder.append(city.getCityId()); 
builder.append("','name':'"); 
builder.append(city.getCity()); 
builder.append("'},"); 
} 
if (builder.length() > 1) 
builder.replace(builder.length() - 1, builder.length(), "]"); 
write(builder.toString()); 
} 
} 
} 
/** 
* 加載區(qū)數(shù)據(jù) 
* 
*/ 
public void loadRegion() { 
if (q == null || q.trim().equals("")) { 
write("noId"); 
} else { 
List<Xzqh> citys = xzqhService.queryDistricts(q.trim()); 
if (citys == null || citys.size() < 1) { 
write("null"); 
} else { 
StringBuilder builder = new StringBuilder("["); 
for (Xzqh district : citys) { 
builder.append("{'id':'"); 
builder.append(district.getRegionId()); 
builder.append("','name':'"); 
builder.append(district.getRegion()); 
builder.append("'},"); 
} 
if (builder.length() > 1) 
builder.replace(builder.length() - 1, builder.length(), "]"); 
write(builder.toString()); 
} 
} 
} 