页面代码
<div>
省份:<select id="province">
<option value="">请选择省份</option>
</select>
城市:<select id="city">
<option value="">请选择城市</option>
</select>
</div>
级联菜单js代码
$(document).ready(function(){
var province=$("#province");
var city=$("#city");
var provinceurl="/Struts2/base/selectProvince.action";
$.post(provinceurl,{code:"province"},function(data){
var dataObj=eval("("+data+")");
$.each(dataObj,function(index,item){
var tempOption = document.createElement("option");
tempOption.value = item.provinceId;
tempOption.innerHTML = item.provinceName;
province.append(tempOption);
});
},"json");
province.change(function(){
city.empty();
var params={provinceCode:$('#province option:selected').val()};
$.post("/Struts2/base/selectCity.action",params,function(data){
alert(data);
var dataObj=eval("("+data+")"); //转换为json对象
$.each(dataObj,function(index,item){
var tempOption = document.createElement("option");
tempOption.value = item.cityId;
tempOption.innerHTML = item.cityName;
city.append(tempOption);
});
},"json");
});
});
Action
ackage com.hyts.business.action;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import net.sf.json.JSONArray;
import com.hyts.dao.ProvinceDAO;
import com.hyts.model.City;
import com.hyts.model.Province;
import com.opensymphony.xwork2.ActionSupport;
public class ChainSelectAction extends ActionSupport {
private static final long serialVersionUID = 1383189653446960523L;
private HttpServletRequest request;
private String result;//前台接收数据
private String provinceCode;
public String selectProvince() {
ProvinceDAO provinceDAO=new ProvinceDAO();
List<Province> list=provinceDAO.getAllProvince();
JSONArray jsonArray2 = JSONArray.fromObject( list );
this.result=jsonArray2.toString();
return SUCCESS;
}
public String selectCity() throws Exception{
ProvinceDAO provinceDAO=new ProvinceDAO();
System.out.println(this.provinceCode);
int provinceId=Integer.parseInt(this.provinceCode);
List<City> list=provinceDAO.getCityByProvince(provinceId);
for(int i=0;i<list.size();i++)
{
City city=list.get(i);
System.out.println(city.getCityName());
}
JSONArray jsonArray = JSONArray.fromObject( list );
this.result=jsonArray.toString();
return SUCCESS;
}
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
public String getProvinceCode() {
return provinceCode;
}
public void setProvinceCode(String provinceCode) {
this.provinceCode = provinceCode;
}
public void setServletRequest(HttpServletRequest request) {
this.request=request;
}
}
Struts.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<include file="struts-default.xml"/>
<package name="/base" extends="json-default" namespace="/base">
<action name="selectProvince" class="com.hyts.business.action.ChainSelectAction" method="selectProvince">
<result type="json">
<param name="root">result</param>
</result>
</action>
<action name="selectCity" class="com.hyts.business.action.ChainSelectAction" method="selectCity">
<result type="json">
<param name="root">result</param>
</result>
</action>
</package>
</struts>
分享到:
相关推荐
通过Jquery Ajax操作数据库实现二级级联....
该实例为本人项目中使用的模块代码,经过专业测试人员测试,兼容所有主流浏览器,如有不解之处请联系本人
例子使用强大的ajax框架jQuery实现的级联下拉列表
用jquery的ajax实现的二级级联查询,其中用jsp或者servlet动态生成xml文件,然后再用jquery来解析xml获取其中的数据~~
ajax struts jquery json 实现从数据库回调下拉菜单
用Ajax实现的一个级联菜单,下拉菜单是从数据库中取数据的。
完整可运行的用jquery开发的ajax各种实例包括(级联菜单,谷歌式搜索提示,可编辑表格页面无刷新切换等)
NULL 博文链接:https://kingzhcool.iteye.com/blog/2051543
jQuery ajax 通过JSON 下拉列表框级联,点击省份,级联城市,此demo是在springMVC环境下实现的,如果感兴趣可以下载我整理的springMVC.
主要介绍了ajax+jQuery实现级联显示地址的方法,涉及jQuery操作Ajax实现级联显示的技巧,非常具有实用价值,需要的朋友可以参考下
这是一个利用了Ajax技术的一个Jquery实例,动态的生成级联的下拉列表框,在中关村zol中经常可以看到。如果遇到无法显示的情况,请自己阅读代码。
工作分享:jquery+ajax框架实现4级级联菜单,废话不多说,直接上代码,可以直接用
mysql ajax 级联操作。本案例可以很灵活的使用任何级别的级联操作.基于ssh框架的
好好看看!这是关于jQuery + Ajax + json 级联的一段代码!
jquery+ajax 城市三级级联,无刷新
Ajax(jQuery)全国城市三级级联菜单插件,简单易用
摘要:脚本资源,jQuery,级联菜单,全国城市菜单 美化版的jQuery全国城市级联菜单代码实例包,Select下拉框已经过美化,比传统的灰色风格Select下拉列表更美观,城市菜单信息存放在XML文件内,若城市信息有所变动,...
jQuery城市级联插件 3级联动 ajax
主要介绍了jQuery ajax+PHP实现的级联下拉列表框功能,涉及php结合jQuery的$.get方法动态交互实现省市二级联动下拉列表框相关操作技巧,需要的朋友可以参考下