運行效果：

?

=================================================

部分代碼：

=================================================

當然首先你數據庫中要有這個table，不然你沒有數據.....^_^

所在地:

${xzqh.province}

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("系統找不到屬于該省的市");

}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(""

+ data[i].name + "");

}else{

citySelect.append(""

+ data[i].name + "");

}

}

loadRegion();

}

});

}

};

/**

* 加載區

*

*/

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("系統找不到屬于該市的區");

}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(""

+ data[i].name + "");

}else{

regionSelect.append(""

+ data[i].name + "");

}

}

}

});

}

};

/**

* 省改變事件

*

*/

$("#provinceSelect").change(loadCity);

/**

* 市改變事件

*

*/

$("#citySelect").change(loadRegion);

$(function() {

loadCity();

});

后臺方法：

/**

* 加載城市數據

*

*/

public void loadCity() {

if (q == null || q.trim().equals("")) {

write("noId");

} else {

List 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());

}

}

}

/**

* 加載區數據

*

*/

public void loadRegion() {

if (q == null || q.trim().equals("")) {

write("noId");

} else {

List 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());

}

}

}

總結

以上是生活随笔為你收集整理的html省市区选择器代码,js实现一个省市区三级联动选择框代码分享的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。