jQuery + ajax 级联菜单.
<%
Map<String,Privince> privincesMap = TestDB.getPrivinces();
List<Privince> privinces = new ArrayList<Privince>();
for(String privinceId : privincesMap.keySet()) {
privinces.add(privincesMap.get(privinceId));
}
pageContext.setAttribute(“privinces”, privinces);
%>
<table>
<tr>
<td>省会：
<select id=“privince” name=“privince” >
<c:forEach items=“${privinces}“ var=“privince”>
<option value=“${privince.id}“>${privince.name}</option>
</c:forEach>
</select></td>
<td>城市：<select id=“city” name=“city” ></select></td>
</tr>
</table>
<script type=“text/javascript”>
$(document).ready(function(){
$(“#privince”).change(function(){
$.ajax({type:”post”,url:”select.do”,dataType:”json”,
data:{“privinceId” : $(“#privince option:selected”).val()},
success:function(data){
$(“#city”).html(“”);
$.each(data,function(i,item){
$(“#city”).append(“<option value=”+item.id+”>”+item.name+”</option>”);
});
}
});
});
});
</script>
web.xml
<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.seatStatusResources</param-value>
</context-param>
<filter>
<filter-name>Set Character Encoding</filter-name>
<filter-class>com.demo.filter.SetCharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>Set Character Encoding</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<servlet>
<servlet-name>selectServlet</servlet-name>
<servlet-class>com.demo.servlet.SelectServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>selectServlet</servlet-name>
<url-pattern>/select.do</url-pattern>
</servlet-mapping>
public class SelectServlet extends HttpServlet {
private static final long serialVersionUID = -7299697652408071426L;
Map<String, Privince> privincesMap = TestDB.getPrivinces();
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException{
doPost(request, response);
}
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException{
response.setContentType(“text/html;charset=UTF-8″);
String privinceId = request.getParameter(“privinceId”);
Privince privince = privincesMap.get(privinceId);
List<City> cities = privince.getCities();
response.getWriter().write(JSONArray.fromObject(cities).toString());
}
}
public class TestDB {
private static Map<String, Privince> privinces = new TreeMap<String, Privince>();
static {
Privince beiJing = new Privince(“001″, “北京”);
privinces.put(“001″, beiJing);
Privince shangHai = new Privince(“002″, “上海”);
privinces.put(“002″, shangHai);
Privince tianJing = new Privince(“003″, “天津”);
privinces.put(“003″, tianJing);
Privince chongQing = new Privince(“004″, “重庆”);
privinces.put(“004″, chongQing);
// 河北
Privince heBei = new Privince(“005″, “河北”);
City hbsjz = new City(“005001″, “石家庄”);
heBei.addCity(hbsjz);
City hbqhd = new City(“005002″, “秦皇岛”);
heBei.addCity(hbqhd);
City hbbd = new City(“005003″, “保定”);
heBei.addCity(hbbd);
City hbts = new City(“005004″, “唐山”);
heBei.addCity(hbts);
City hblf = new City(“005005″, “廊坊”);
heBei.addCity(hblf);
City hbcd = new City(“005006″, “承德”);
heBei.addCity(hbcd);
City hbcz = new City(“005007″, “沧州”);
heBei.addCity(hbcz);
City hbzjk = new City(“005008″, “张家口”);
heBei.addCity(hbzjk);
City hbhd = new City(“005009″, “邯郸”);
heBei.addCity(hbhd);
City hbxt = new City(“005010″, “邢台”);
heBei.addCity(hbxt);
City hbhs = new City(“005011″, “衡水”);
heBei.addCity(hbhs);
privinces.put(“005″, heBei);
// 河南
Privince heNan = new Privince(“006″, “河南”);
City hnzz = new City(“006001″, “郑州”);
heNan.addCity(hnzz);
City hnly = new City(“006002″, “洛阳”);
heNan.addCity(hnly);
City hnny = new City(“006003″, “南阳”);
heNan.addCity(hnny);
City hnxc = new City(“006004″, “许昌”);
heNan.addCity(hnxc);
City hnpds = new City(“006005″, “平顶山”);
heNan.addCity(hnpds);
City hzk = new City(“006006″, “周口”);
heNan.addCity(hzk);
City hay = new City(“006007″, “安阳”);
heNan.addCity(hay);
City hnjz = new City(“006008″, “焦作”);
heNan.addCity(hnjz);
City hnxx = new City(“006009″, “新乡”);
heNan.addCity(hnxx);
City hbsq = new City(“006010″, “商丘”);
heNan.addCity(hbsq);
City hbxy = new City(“006011″, “信阳”);
heNan.addCity(hbxy);
City hnzmd = new City(“006012″, “驻马店”);
heNan.addCity(hnzmd);
City hnkf = new City(“006013″, “开封”);
heNan.addCity(hnkf);
City hnsmx = new City(“006014″, “三门峡”);
heNan.addCity(hnsmx);
City hnpy = new City(“006015″, “濮阳”);
heNan.addCity(hnpy);
privinces.put(“006″, heNan);
// 山西
Privince shanXi = new Privince(“007″, “山西”);
City sxty = new City(“007001″, “太原”);
shanXi.addCity(sxty);
City sxdt = new City(“007002″, “大同”);
shanXi.addCity(sxdt);
City sxcz = new City(“007003″, “长治”);
shanXi.addCity(sxcz);
City sxyq = new City(“007004″, “阳泉”);
shanXi.addCity(sxyq);
City sxjz = new City(“007005″, “晋中”);
shanXi.addCity(sxjz);
City sxjc = new City(“007006″, “晋城”);
shanXi.addCity(sxjc);
City sxlf = new City(“007007″, “临汾”);
shanXi.addCity(sxlf);
City sxyc = new City(“007008″, “运城”);
shanXi.addCity(sxyc);
City sxln = new City(“007009″, “吕梁”);
shanXi.addCity(sxln);
City sxxz = new City(“007010″, “忻州”);
shanXi.addCity(sxxz);
City sxsz = new City(“007011″, “朔州”);
shanXi.addCity(sxsz);
privinces.put(“007″, shanXi);
// 辽宁
Privince liaoNing = new Privince(“008″, “辽宁”);
City lnsy = new City(“008001″, “沈阳”);
liaoNing.addCity(lnsy);
City lndl = new City(“008002″, “大连”);
liaoNing.addCity(lndl);
City lnas = new City(“008003″, “鞍山”);
liaoNing.addCity(lnas);
City lnyk = new City(“008004″, “营口”);
liaoNing.addCity(lnyk);
City lnpj = new City(“008005″, “盘锦”);
liaoNing.addCity(lnpj);
City lnfs = new City(“008006″, “抚顺”);
liaoNing.addCity(lnfs);
City lnjz = new City(“008007″, “锦州”);
liaoNing.addCity(lnjz);
City lnbx = new City(“008008″, “本溪”);
liaoNing.addCity(lnbx);
City lndd = new City(“008009″, “丹东”);
liaoNing.addCity(lndd);
City lntn = new City(“008010″, “铁岭”);
liaoNing.addCity(lntn);
City lnly = new City(“008011″, “辽阳”);
liaoNing.addCity(lnly);
privinces.put(“008″, liaoNing);
// 吉林
Privince jiLin = new Privince(“009″, “吉林”);
City jljl = new City(“009001″, “吉林”);
jiLin.addCity(jljl);
City jlcc = new City(“009002″, “长春”);
jiLin.addCity(jlcc);
City jlbs = new City(“009003″, “白山”);
jiLin.addCity(jlbs);
City jlsy = new City(“009004″, “松原”);
jiLin.addCity(jlsy);
City jlsp = new City(“009005″, “四平”);
jiLin.addCity(jlsp);
City jlyb = new City(“009006″, “延边”);
jiLin.addCity(jlyb);
City jlth = new City(“009007″, “通化”);
jiLin.addCity(jlth);
City jlbc = new City(“009008″, “白城”);
jiLin.addCity(jlbc);
City jnly = new City(“009009″, “辽源”);
jiLin.addCity(jnly);
privinces.put(“009″, jiLin);
// 黑龙江
Privince heiLongJiang = new Privince(“010″, “黑龙江”);
City hljhrb = new City(“010001″, “哈尔滨”);
heiLongJiang.addCity(hljhrb);
City hljdq = new City(“010002″, “大庆”);
heiLongJiang.addCity(hljdq);
City hljqqhr = new City(“010003″, “齐齐哈尔”);
heiLongJiang.addCity(hljqqhr);
City hljmdj = new City(“010004″, “牡丹江”);
heiLongJiang.addCity(hljmdj);
City hljjms = new City(“010005″, “佳木斯”);
heiLongJiang.addCity(hljjms);
City hljsh = new City(“010006″, “绥化”);
heiLongJiang.addCity(hljsh);
City hljhh = new City(“010007″, “黑河”);
heiLongJiang.addCity(hljhh);
City hljjx = new City(“010008″, “鸡西”);
heiLongJiang.addCity(hljjx);
City hljsys = new City(“010009″, “双鸭山”);
heiLongJiang.addCity(hljsys);
City hljyc = new City(“010010″, “伊春”);
heiLongJiang.addCity(hljyc);
privinces.put(“010″, heiLongJiang);
Privince jiangSu = new Privince(“011″, “江苏”);
privinces.put(“011″, jiangSu);
Privince zheJiang = new Privince(“012″, “浙江”);
privinces.put(“012″, zheJiang);
Privince anHui = new Privince(“013″, “安徽”);
privinces.put(“013″, anHui);
Privince fuJian = new Privince(“014″, “福建”);
privinces.put(“014″, fuJian);
Privince jiangXi = new Privince(“015″, “江西”);
privinces.put(“015″, jiangXi);
Privince shanDong = new Privince(“016″, “山东”);
privinces.put(“016″, shanDong);
Privince huBei = new Privince(“017″, “湖北”);
privinces.put(“017″, huBei);
Privince huNan = new Privince(“018″, “湖南”);
privinces.put(“018″, huNan);
Privince guangDong = new Privince(“019″, “广东”);
privinces.put(“019″, guangDong);
Privince haiNan = new Privince(“020″, “海南”);
privinces.put(“020″, haiNan);
// 四川
Privince siChuan = new Privince(“021″, “四川”);
City sccd = new City(“021001″, “成都”);
siChuan.addCity(sccd);
City scnc = new City(“021002″, “南充”);
siChuan.addCity(scnc);
City scmy = new City(“021003″, “绵阳”);
siChuan.addCity(scmy);
City scdz = new City(“021004″, “达州”);
siChuan.addCity(scdz);
City scyb = new City(“021005″, “宜宾”);
siChuan.addCity(scyb);
City scls = new City(“021006″, “乐山”);
siChuan.addCity(scls);
City scdy = new City(“021007″, “德阳”);
siChuan.addCity(scdy);
City scnj = new City(“021008″, “内江”);
siChuan.addCity(scnj);
City sczg = new City(“021009″, “自贡”);
siChuan.addCity(sczg);
City sclz = new City(“021010″, “泸州”);
siChuan.addCity(sclz);
City scyn = new City(“021011″, “遂宁”);
siChuan.addCity(scyn);
City sczy = new City(“021012″, “资阳”);
siChuan.addCity(sczy);
City scgy = new City(“021013″, “广元”);
siChuan.addCity(scgy);
City scpzh = new City(“021014″, “攀枝花”);
siChuan.addCity(scpzh);
City scga = new City(“021015″, “广安”);
siChuan.addCity(scga);
City scbz = new City(“021016″, “巴中”);
siChuan.addCity(scbz);
City scms = new City(“021017″, “眉山”);
siChuan.addCity(scms);
City scya = new City(“021018″, “雅安”);
siChuan.addCity(scya);
privinces.put(“021″, siChuan);
}
private TestDB() {}
public static Map<String, Privince> getPrivinces() {
return privinces;
}
}
public class Privince {
private final String id;
private final String name;
private List<City> cities = new ArrayList<City>();
public Privince(String id, String name) {
this.id = id;
this.name = name;
}
public String getId() {
return id;
}
public String getName() {
return name;
}
public void addCity(City city) {
this.cities.add(city);
}
public List<City> getCities() {
return cities;
}
}
public class City {
private final String id;
private final String name;
public City(String id, String name) {
this.id = id;
this.name = name;
}
public String getId() {
return id;
}
public String getName() {
return name;
}
}
http://joe5456536.blog.163.com/blog/static/85374773201292172611889/