ajax 省市区多级联动（在struts2中），有人能做出个简单的吗？？

一、实现思路

1.获取省份的列表值，有2种方式：一是返回List集合，在页面进行迭代；二是在业务类中将下拉列表封装好，页面通过JQuery方法写入。

这里暂时采用第二种方法。

2.前台JQuery：①数据库里面需要存的值，三者都有可能，三选一（判断是否选中了下面的级联项，按选中的最低级项为准值）；

②将三个下拉框的name属性设置为变量，便于动态设置；③当修改重定位时，因为数据库中只有一个地区编号，所以需要根据地区编号将所在地区给定位。

定位方法：通过判断所在地区的编号后面的零，如果是四个0结束即为省，二个0即为市，都符合为区县。

3.调用方法：①jsp页面上引用include/js/cascadeCity.js；②调用返回省列表的方法provinceOption( *** 作类型, 省份编号, 城市编号, 区县编号)

③修改实体类（该实体类即你要修改的那个实体类），在实体类中添加private String provinceNumprivate String cityNumprivate String countyNum

及对应的get、set方法（添加实体类中变量可自定义），添加的这3个变量主要用于修改时定位用户已选城市地区。

二、实现

1.cascadeCity.js

/*

* subType - *** 作类型

* pNum - 省份编号

* cityNum - 城市编号

* countyNum - 区县编号

*

*/

function provinceOption(subType, pNum, cityNum, countyNum) {

$.ajax({

type: "POST",

url: "jsonCityAction!provincesInfo.action",

dataType:"text",

success: function(json){

var obj = $.parseJSON(json)

$("#province").html('<option value="" selected>\u8BF7\u9009\u62E9</option>' + obj.gS_Result)

if(subType == "modify") {

//给省份进行下拉框定位

$('#province option[value=' + pNum + ']').attr('selected', 'selected')

}

getCity(subType, pNum, cityNum, countyNum)

},

error: function(json){

alert("json=" + json)

return false

}

})

}

//改变省份时触发

function changeProvince() {

//当 *** 作id为province的下拉框时，触发事件

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

var province_value = $("select[id='province'][@selected]").val()

getCity(operateType, province_value)

})

}

function getparmscity(){

var province_value = $("select[id='province'][@selected]").val()

getCity(operateType, province_value)

}

//改变城市时触发

function changeCity() {

//当 *** 作id为city的下拉框时，触发事件

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

var city_value = $("select[id='city'][@selected]").val()

getCounty(operateType, city_value)

})

}

//返回城市列表

function getCity(subType, pNum, cityNum, countyNum) {

$.ajax({

type: "POST",

url: "jsonCityAction!cityInfo.action?gS_PNum=" + pNum,

dataType:"text",

success: function(json){

var obj = $.parseJSON(json)

$("#city").html('<option value="" selected>\u8BF7\u9009\u62E9</option>' + obj.gS_Result)

if(subType == "modify") {

//给城市定位

$('#city option[value="' + cityNum + '"]').attr('selected',true)

}

getCounty(subType, cityNum, countyNum)

},

error: function(json){

alert("json=" + json)

return false

}

})

}

//返回区县列表

function getCounty(subType, cityNum, countyNum) {

$.ajax({

type: "POST",

url: "jsonCityAction!countiesInfo.action?gS_CityNum=" + cityNum,

dataType:"text",

success: function(json){

var obj = $.parseJSON(json)

$("#county").html('<option value="" selected>\u8BF7\u9009\u62E9</option>' + obj.gS_Result)

if(subType == "modify") {

//给区县定位

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

}

},

error: function(json){

alert("json=" + json)

return false

}

})

}

2.jsp页面:

……

引入js

<script src="include/js/jquery-1.4.2.min.js" type="text/javascript"></script>

<script type="text/javascript" src="include/js/cascadeCity.js"></script>

<script type="text/javascript">

$(function() {

/***===级联城市使用===***/

changetrcompany()

changeProvince() //改变省份选项时触发事件

changeCity() //改变城市选项时触发事件

})

</script>

…………

<tr>

<td height="22" class=topline align="right">所属地区：</td>

<td bgcolor="#FFFFFF" height="22">

<div>

<div id="provinceDiv" class="divBL">

<select size='1' name="provinceName" id='province' class="sel"></select></div>

<div id="cityDiv" class="divBL">

<select size='1' id='city' class="sel"></select>

</div>

<div id="countyDiv" class="divBL">

<select size='1' id='county' class="sel"></select>

</div>

</div>

</td>

</tr>

3.struts.xml

<package name="ajaxSYS" extends="json-default" >

<action name="jsonCityAction" class="iCityAction">

<result type="json"/>

</package>

</action>

4.action类

import javax.annotation.Resource

import org.springframework.stereotype.Component

import com.ideamov.service.city.CityService

import com.opensymphony.xwork2.ActionSupport

@Component(value = "iCityAction")

public class CityAction extends ActionSupport {

private static final long serialVersionUID = -3234677100675620024L

private CityService iCityService

private String gS_PNum //省份编号

private String gS_CityNum //城市编号

private String gS_Result //返回数据

public String provincesInfo() throws Exception {

gS_Result = iCityService.getProvincesInfo()

return SUCCESS

}

public String cityInfo() throws Exception {

gS_Result = iCityService.getCityInfo(gS_PNum)

return SUCCESS

}

public String countiesInfo() throws Exception {

gS_Result = iCityService.getCountiesInfo(gS_CityNum)

return SUCCESS

}

/***=====set、get=====***/

public String getgS_Result() {

return gS_Result

}

public String getgS_PNum() {

return gS_PNum

}

public void setgS_PNum(String gSPNum) {

gS_PNum = gSPNum

}

public String getGS_CityNum() {

return gS_CityNum

}

public void setGS_CityNum(String cityNum) {

gS_CityNum = cityNum

}

@Resource

public void setCityService(CityService iCityService) {

this.iCityService = iCityService

}

}

5.业务层和dao层就是配合来完成数据库查询

/**

*

* 方法名: getProvincesInfo

* 方法描述: 获取省份的列表值

* 参数： @return

* 返回值：

* 异常：

*

*/

@Override

public String getProvincesInfo() {

StringBuffer sb_Provinces = new StringBuffer()

List<TcPublicProvinces>tcPPList = iTcPPDao.findAll(TcPublicProvinces.class, "orderNum", true, new Criterion[]{Restrictions.isNotNull("num")})

for(TcPublicProvinces tcPP : tcPPList) {

sb_Provinces.append("<option value='" + tcPP.getNum() + "'>" + tcPP.getTitle() + "</option>")

}

return sb_Provinces.toString()

}

/**

*

* 方法名: getCityInfo

* 方法描述: 通过省份编号，获取到城市列表

* 参数： @param pNum - 省份编号

* 参数： @return

* 返回值：

* 异常：

*

*/

@Override

public String getCityInfo(String pNum) {

StringBuffer sb_City = new StringBuffer()

List<TcPublicCity>tcPCList = iTcPCDao.findAll(TcPublicCity.class, "orderNum", true, new Criterion[]{Restrictions.eq("remark", pNum)})

for(TcPublicCity tcPC : tcPCList) {

sb_City.append("<option value='" + tcPC.getNum() + "'>" + tcPC.getTitle() + "</option>")

}

return sb_City.toString()

}

/**

*

* 方法名: getCountyInfo

* 方法描述: 根据城市编号，获取到区县列表的值

* 参数： @param cityNum - 城市编号

* 参数： @return

* 返回值：

* 异常：

*

*/

@Override

public String getCountiesInfo(String cityNum) {

StringBuffer sb_Countys = new StringBuffer()

List<TcPublicCounties>tcPCsList = iTcPCsDao.findAll(TcPublicCounties.class, "orderNum", true, new Criterion[]{Restrictions.eq("remark", cityNum)})

for(TcPublicCounties tcPCs : tcPCsList) {

sb_Countys.append("<option value='" + tcPCs.getNum() + "'>" + tcPCs.getTitle() + "</option>")

}

return sb_Countys.toString()

}

PS：有问题可留蔻蔻，我加你！~good luck！~

如果你这些城市是写在数据库里的，而后台有没有这个添加接口的话有两种方法可以进行新增、修改、或者删除斗闹 *** 作：

1、打开数据库，找到对应的表打开直接写入就可以了，添加的时候注意字段类型与库里的保持一致

2、掘销运在你原有的后台管理系统上做二次开发，把这个城市的管理接口功能做上去，这样以后就可以通过这个管理接口对城市进行管理！

希望对你的问题有所帮助，一点忠告：无论哪一种 *** 作，在修改之前一定要对原始数据库或者文件进行备份，以防在修改过程中出现问题！判梁

你这 是通过 后台取数据的，关改 上面的代码是没有用的，省市联动一般有两种做法。第一种，下载一衡旁个js的省 市联动的插件，调用插件就可以，第二种，就是存在数据库里，然后前端当省框的值改变 的时候就ajax去后台取出该省的所有市在市框中列出来，然后再咐卖橡市框的值改变的时候，再后台去取出该市所有的县区在前端列出来。现在大部份配吵是用第一种做法比较好，下个插件吧

---