html省市区选择器代码,js实现一个省市区三级联动选择框代码分享

运行效果：

 

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

部分代码：

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

当然首先你数据库中要有这个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());

}

}

}