js實(shí)現(xiàn)一個(gè)省市區(qū)三級(jí)聯(lián)動(dòng)選擇框代碼分享
更新時(shí)間:2013年03月06日 10:43:44 作者:
省市區(qū)三級(jí)聯(lián)動(dòng)在填寫(xiě)表單時(shí)有關(guān)地址這一塊顯得尤為重要,直接提高了用戶(hù)的填寫(xiě)速度與準(zhǔn)確度,接下來(lái)本文使用js代碼實(shí)現(xiàn)一個(gè),感興趣的你可以參考下希望可以幫助到你
運(yùn)行效果:
=================================================
部分代碼:
=================================================
當(dāng)然首先你數(shù)據(jù)庫(kù)中要有這個(gè)table,不然你沒(méi)有數(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("請(qǐng)求錯(cuò)誤");
}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("請(qǐng)求錯(cuò)誤");
}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();
});
后臺(tái)方法:
/**
* 加載城市數(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());
}
}
}

=================================================
部分代碼:
=================================================
當(dāng)然首先你數(shù)據(jù)庫(kù)中要有這個(gè)table,不然你沒(méi)有數(shù)據(jù).....^_^
復(fù)制代碼 代碼如下:
<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代碼:
復(fù)制代碼 代碼如下:
/**
* 加載市
*
*/
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("請(qǐng)求錯(cuò)誤");
}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("請(qǐng)求錯(cuò)誤");
}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();
});
后臺(tái)方法:
復(fù)制代碼 代碼如下:
/**
* 加載城市數(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());
}
}
}
您可能感興趣的文章:
- PHP+Mysql+Ajax+JS實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
- javascript實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單
- 省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單javascript版
- 從QQ網(wǎng)站中提取的純JS省市區(qū)三級(jí)聯(lián)動(dòng)菜單
- JSON+Jquery省市區(qū)三級(jí)聯(lián)動(dòng)
- 原生js實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)代碼分享
- vue.js模仿京東省市區(qū)三級(jí)聯(lián)動(dòng)的選擇組件實(shí)例代碼
- javascript實(shí)現(xiàn)簡(jiǎn)單的省市區(qū)三級(jí)聯(lián)動(dòng)
- javascript省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單實(shí)例演示
- js實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)非select下拉框版
相關(guān)文章
javascript實(shí)現(xiàn)函數(shù)柯里化與反柯里化過(guò)程解析
這篇文章主要介紹了javascript實(shí)現(xiàn)函數(shù)柯里化與反柯里化過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10JS獲取及設(shè)置TextArea或input文本框選擇文本位置的方法
這篇文章主要介紹了JS獲取及設(shè)置TextArea或input文本框選擇文本位置的方法,涉及TextArea及input文本操作技巧,需要的朋友可以參考下2015-03-03JS實(shí)現(xiàn)數(shù)組深拷貝的方法分析
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組深拷貝的方法,結(jié)合實(shí)例形式分析了javascript數(shù)組深拷貝的相關(guān)原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下2019-03-03實(shí)現(xiàn)圖片預(yù)加載的三大方法及優(yōu)缺點(diǎn)分析
本文介紹了實(shí)現(xiàn)圖片預(yù)加載的三大方法(CSS/JAVASCRIPT/AJAX)以及這三種方法的優(yōu)缺點(diǎn)分析,是篇非常值得推薦的文章,小伙伴們可要仔細(xì)研究下。2014-11-11微信小程序中的video視頻實(shí)現(xiàn) 自定義播放按鈕、封面圖、視頻封面上文案
這篇文章主要介紹了微信小程序中的video視頻實(shí)現(xiàn) 自定義播放按鈕、封面圖、視頻封面上文案,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01快速掌握WordPress中加載JavaScript腳本的方法
這篇文章主要介紹了快速掌握WordPress中加載JavaScript腳本的方法,以及響應(yīng)的CSS樣式加載方法的簡(jiǎn)介,需要的朋友可以參考下2015-12-12微信小程序?qū)崿F(xiàn)拉鏈?zhǔn)降幕瑒?dòng)驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)拉鏈?zhǔn)降幕瑒?dòng)驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05