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());
}
}
}
總結
以上是生活随笔為你收集整理的html省市区选择器代码,js实现一个省市区三级联动选择框代码分享的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 车头车尾傻傻分不清！雪铁龙版“宏光MIN
- 下一篇： 网页表格线框html,关于Dreamwe