java 省级下拉列表_省市区三级联动下拉选框---具体功能实现

如图:

注: 此为从数据库中查询的省市区数据, 如果需要不涉及后台的JS实现省市区三级联动, 可查看:

html部分:

所在省市区:

--选择省份--

--选择城市--

--选择地区--

js部分:

省市区通过异步查询数据库获得. 其中，DISTRICT_ID为省/市/区的id，PARENT_ID为省/市/区的父id。例如：区的父id就是市的id，市的父id就是省的id。

var areaInfo = {};

$(function() {

// 加载城市

$("#province").change(function() {

var curProvince = $(this).val();

if (curProvince !== "") {

areaInfo.loadCity(curProvince);

} else {

$("#city").empty().append('--请选择城市--');

$("#county").empty().append('--请选择地区--');

}

});

// 加载地区

$("#city").change(function() {

var curCity = $(this).val(); //

if (curCity !== "") {

areaInfo.loadCounty(curCity);

}

});

//-----------------------------------------------------------

// 加载省份

areaInfo.loadProvince = function() {

HttpPost("/district/getAreadistrict.do", {

level : 1

}, function(data) {

data = data.data;

for ( var i = 0; i < data.length; i++) {

$("#province").append(

''

+ data[i].DISTRICTNAME + '');

}

});

};

// 加载城市

areaInfo.loadCity = function(pid) {

$("#city").empty().append('--请选择城市--');

$("#county").empty().append('--请选择地区--');

HttpPost("/district/getAreadistrict.do", {

level : 2,

parentID : pid

}, function(data) {

data = data.data;

for ( var i = 0; i < data.length; i++) {

$("#city").append(

''

+ data[i].DISTRICTNAME + '');

}

});

};

// 加载地区

areaInfo.loadCounty = function(cid) {

$("#county").empty().append('--请选择地区--');

$("#county option[value='']").attr("selected", true);

HttpPost("/district/getAreadistrict.do", {

level : 3,

parentID : cid

}, function(data) {

data = data.data;

for ( var i = 0; i < data.length; i++) {

$("#county").append(

''

+ data[i].DISTRICTNAME + '');

}

});

};

});

struts配置文件:

text/html;charset=UTF-8

jsonModelMap

DistrictAction.java:

public String getAreadistrict(){

String level = this.request.getParameter("level");

String parentID = this.request.getParameter("pid");

List areadistrictJson =districtService.getAreadistrictJson(level,parentID);

HashMap resultMap = new HashMap();

resultMap.put("data", areadistrictJson);

setJsonModelMap(resultMap);

return SUCCESS;

}

对应Ibatis的映射文件内容:

from MG_UC_DISTRICT t

]]>

1 = 1

AND t.district_level = #{level}

AND t.PARENT_ID = #{pid}

AND t.PARENT_ID is null