jquery-联动菜单

jquery---联动菜单
1、Action层代码 （dao，Service略 直接虚拟数据）

?

package cn.hz.lly.action;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import org.apache.struts2.ServletActionContext;
import cn.hz.lly.vo.ProCityCon;
import com.opensymphony.xwork2.ActionSupport;
public class ProAction extends ActionSupport {
?private static final long serialVersionUID = -7361997732488681602L;
?private String id;
?public String listProvince() throws Exception{
??HttpServletResponse response = ServletActionContext.getResponse();
??response.setContentType("text/html;charset=utf-8");
??PrintWriter out = response.getWriter();
??//查询数据
??List<ProCityCon> list = new ArrayList<ProCityCon>();
??ProCityCon pro0 = new ProCityCon();
??pro0.setId("1");
??pro0.setName("山西");
??ProCityCon pro1 = new ProCityCon();
??pro1.setId("2");
??pro1.setName("陕西");
??ProCityCon pro2 = new ProCityCon();
??pro2.setId("3");
??pro2.setName("宁夏");
??list.add(pro0);
??list.add(pro1);
??list.add(pro2);
??JSONArray jsoArray = JSONArray.fromObject(list);
??out.print(jsoArray.toString());
??return null;
?}
?public String listCity() throws Exception{
??HttpServletResponse response = ServletActionContext.getResponse();
??response.setContentType("text/html;charset=utf-8");
??PrintWriter out = response.getWriter();
??//查询数据
??List<ProCityCon> list = new ArrayList<ProCityCon>();
??ProCityCon pro0 = new ProCityCon();
??ProCityCon pro1 = new ProCityCon();
??ProCityCon pro2 = new ProCityCon();
??ProCityCon pro3 = new ProCityCon();
??if("1".equals(id)){
???pro0.setId("1");
???pro0.setName("太原");
???pro1.setId("2");
???pro1.setName("大同");
???pro2.setId("3");
???pro2.setName("吕梁");
??}else if("2".equals(id)){
???pro0.setId("4");
???pro0.setName("西安");
???pro1.setId("5");
???pro1.setName("咸阳");
???pro2.setId("6");
???pro2.setName("宝鸡");
???pro3.setId("7");
???pro3.setName("渭南");
???
??}else if("3".equals(id)){
???pro0.setId("8");
???pro0.setName("银川");
???pro1.setId("9");
???pro1.setName("大武口");
??}else{
???return null;
??}
??list.add(pro0);
??list.add(pro1);
??list.add(pro2);
??JSONArray jsoArray = JSONArray.fromObject(list);
??System.out.println(jsoArray.toString());
??out.print(jsoArray.toString());
??return null;
?}
?public String listCounty() throws Exception{
??HttpServletResponse response = ServletActionContext.getResponse();
??response.setContentType("text/html;charset=utf-8");
??PrintWriter out = response.getWriter();
??//查询数据
??List<ProCityCon> list = new ArrayList<ProCityCon>();
??ProCityCon pro0 = new ProCityCon();
??ProCityCon pro1 = new ProCityCon();
??if("1".equals(id)){
????pro0.setId("1");
????pro0.setName("太原市");
????pro1.setId("2");
????pro1.setName("太原辖区");
??}else if("2".equals(id)){
???pro0.setId("1");
???pro0.setName("大同市");
???pro1.setId("2");
???pro1.setName("大同辖区");
??}else if("3".equals(id)){
???pro0.setId("1");
???pro0.setName("吕梁市");
???pro1.setId("2");
???pro1.setName("吕梁辖区");
??}else if("4".equals(id)){
???pro0.setId("1");
???pro0.setName("西安市");
???pro1.setId("2");
???pro1.setName("西安辖区");
??}else if("5".equals(id)){
???pro0.setId("1");
???pro0.setName("咸阳市");
???pro1.setId("2");
???pro1.setName("咸阳辖区");
??}else if("6".equals(id)){
???pro0.setId("1");
???pro0.setName("宝鸡市");
???pro1.setId("2");
???pro1.setName("宝鸡辖区");
??}else if("7".equals(id)){
???pro0.setId("1");
???pro0.setName("渭南市");
???pro1.setId("2");
???pro1.setName("渭南辖区");
??}else if("8".equals(id)){
???pro0.setId("1");
???pro0.setName("金凤区");
???pro1.setId("2");
???pro1.setName("西夏区");
??}else if("9".equals(id)){
???pro0.setId("1");
???pro0.setName("大武口市");
???pro1.setId("2");
???pro1.setName("惠农区");
??}
??else{
???return null;
??}
??list.add(pro0);
??list.add(pro1);
??JSONArray jsoArray = JSONArray.fromObject(list);
??System.out.println(jsoArray.toString());
??out.print(jsoArray.toString());
??return null;
?}
?public String getId() {
??return id;
?}
?public void setId(String id) {
??this.id = id;
?}
}

?

?

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<title>jquery菜单联动</title>
<script language="javaScript" src="script/jquery-1.5.1.js"></script>
<script language="javaScript">
$(document).ready(function(){
$.post("listProvince",function(data,textStatus){
?var dataObject = eval("("+data+")");
?for(var i = 0; i<dataObject.length;i++){
?var id = dataObject[i].id;
?var name = dataObject[i].name;
?$option = $("<option/>");
?$option.attr("value",id);
?$option.text(name);
?$("#province").append($option);
?}?
});?
$("#province").change(function(){
?$("#city").attr("length",1);
?$("#county").attr("length",1);
?var pid = this.value;
?$.post("listCity",{"id":pid},function(data,textStatus){
?var dataObject = eval("("+data+")");
?for(var i = 0; i<dataObject.length;i++){
?var id = dataObject[i].id;
?var name = dataObject[i].name;
?$option = $("<option/>");
?$option.attr("value",id);
?$option.text(name);
?$("#city").append($option);
?}?
?});
});
$("#city").change(function(){
?var pid = this.value;
?$.post("listCounty",{"id":pid},function(data,textStatus){
?var dataObject = eval("("+data+")");
?for(var i = 0; i<dataObject.length;i++){
?var id = dataObject[i].id;
?var name = dataObject[i].name;
?$option = $("<option/>");
?$option.attr("value",id);
?$option.text(name);
?$("#county").append($option);
?}?
?});
});
}
);
</script>
</head>
<body>
<div>
<s:fielderror>
</s:fielderror>
</div>
<select id="province" name="province">
<option value="">-请选择...-</option>
</select>
<select id="city" name="city">
<option value="">-请选择...-</option>
</select>
<select id="county" name="county">
<option value="">-请选择...-</option>
</select>
</body>
</html>

?

说明 ：

1、在Action中直接返回页面json格式数据 ，使用jar net.sf.json.JSONArray

pom 中引入次jar后 maven会自动导入其他依赖jar文件

<dependency>
? <groupId>net.sf.json-lib</groupId>
? <artifactId>json-lib</artifactId>
? <version>2.4</version>
? <classifier>jdk15</classifier>
</dependency>

2、Action直接将List对象转换成json格式返回

JSONArray jsoArray = JSONArray.fromObject(list);

??out.print(jsoArray.toString());

3、页面使用jquery实现ajax调用功能

方法：

$.post("listCity",{"id":pid},function(data,textStatus){

......

}

4、jquery追加至页面

$option = $("<option/>");???????????????? ??//创建option 对象
?$option.attr("value",id);???????????????????? //设置属性值
?$option.text(name);???????????????????????????//设置属性值 使用text()?追加文本方式
?$("#county").append($option);????????? //将设置好的option对象追加至id='count' 的下拉框下

5、清除已有的下拉框(保留第一个节点)

$("#city").attr("length",1);

或者使用??? $("#city" option[value!='']).remove();???? //批量删除已有的value不是' '的下拉选项

?

?

?