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;
 }
}

 

 

2、jsp 代码

<%@ 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不是' '的下拉选项