数据表结构:
struts配置文件:
<package name="area" namespace="/area" extends="json-default" >
<action name="ajax" class="action.AreaAction" method="ajax">
<result name="success" type="json">
<!-- <param name="root">result</param> -->
</result>
</action>
</package>
DAO层:
@SuppressWarnings("unchecked")
public List<MysqlProvince> getprovince() {
String sql = "from MysqlProvince";
List<MysqlProvince> provincLlist = this.getHibernateTemplate().find(sql);
return provincLlist;
}
// 根据省编号获得市
@SuppressWarnings("unchecked")
public List<MysqlCity> getcity(String code_p) {
String sql = "from MysqlCity where code_p='" + code_p + "' ";
List<MysqlCity> cityLlist = this.getHibernateTemplate().find(sql);
return cityLlist;
}
// 根据市编号获得区
@SuppressWarnings("unchecked")
public List<MysqlArea> getarea(String code_c) {
String sql = "from MysqlArea where code_c='" + code_c + "' ";
List<MysqlArea> areaLlist = this.getHibernateTemplate().find(sql);
return areaLlist;
}
service层:
@Override
public List<MysqlArea> getarea(String code_c){
return areaDAO.getarea(code_c);
}
@Override
public List<MysqlCity> getcity(String code_p){
return areaDAO.getcity(code_p);
}
@Override
public List<MysqlProvince> getprovince(){
return areaDAO.getprovince();
}
action:
/***
* 异步加载下拉框
* @return
* @throws IOException
*/
public String ajax() throws IOException {
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
if (getGrade().equals("province")) {
provinceList = areaService.getprovince();
PrintWriter pw = response.getWriter();
try {
Gson g = new Gson();
String data = g.toJson(provinceList);
System.out.println("data:" + data);
pw = response.getWriter();
pw.write(data);
} catch (Exception e) {
System.out.println("getAllHotnewsForJson出错:" + e);
} finally {
pw.flush();
pw.close();
}
return null;
} else if (getGrade().equals("city")) {
cityList = areaService.getcity(code);
PrintWriter pw = response.getWriter();
try {
Gson g = new Gson();
String data = g.toJson(cityList);
System.out.println("data:" + data);
pw = response.getWriter();
pw.write(data);
} catch (Exception e) {
System.out.println("getAllHotnewsForJson出错:" + e);
} finally {
pw.flush();
pw.close();
}
return null;
} else if (getGrade().equals("area")) {
areaList = areaService.getarea(code);
PrintWriter pw = response.getWriter();
try {
Gson g = new Gson();
String data = g.toJson(areaList);
System.out.println("data:" + data);
pw = response.getWriter();
pw.write(data);
} catch (Exception e) {
System.out.println("getAllHotnewsForJson出错:" + e);
} finally {
pw.flush();
pw.close();
}
return null;
}
}
前台代码:
ajax调用:
<script type="text/javascript">
function onSelectChange(obj,toSelId){
setSelect(obj.value,toSelId);
}
function setSelect(fromSelVal,toSelId){
document.getElementById(toSelId).innerHTML="";
jQuery.ajax({
url: "ajax.action",
cache: false,
data:{"code":fromSelVal,"grade":toSelId},
scriptCharset: 'utf-8',
success: function(data){
var optionString = "<option grade=\'请选择\' selected = \'selected\'>--请选择子类--</option>";
var xqo = eval('(' + data + ')');
//alert("toSelId==="+toSelId);
if(toSelId == 'province'){
for(var i in xqo){
optionString+="<option value='"+xqo[i].codeP+"'>"+xqo[i].name+"</option>"
}
}else if(toSelId == 'city'){
for(var i in xqo){
optionString+="<option value='"+xqo[i].codeC+"'>"+xqo[i].name+"</option>"
}
}else if(toSelId == "area"){
for(var i in xqo){
optionString+="<option value='"+xqo[i].codeA+"'>"+xqo[i].name+"</option>"
}
}
$("select[name="+toSelId+"]").append(optionString);
},
error: function (){
alert("error");
}
});
}
setSelect(null,'province');
$('#province').click();
</script>
页面:
<li><select name="province" id="province" οnchange="onSelectChange(this,'city');" style="width:150px" class="input w50">
<option value="null">请选择</option>
<s:iterator value="provinceList" status="stuts" id="test">
<option value='<s:property value="#test.codeP" />'><s:property value="#test.name" /></option>
</s:iterator>
</select></li>
<li><select name="city" id="city" οnchange="onSelectChange(this,'area');" style="width:150px" class="input w50">
<option value="null">请选择</option>
</select></li>
<li><select name="area" id="area" style="width:150px" class="input w50" onChange="">
<option value="null">请选择</option>
</select></li>
参考:
https://my.oschina.net/u/3734228/blog/1594916
https://blog.csdn.net/lyy296293760/article/details/78685163/
https://blog.csdn.net/u010900754/article/details/50886168