jquery---联动菜单

最新推荐文章于 2024-12-09 10:52:52 发布

yujun200

最新推荐文章于 2024-12-09 10:52:52 发布

阅读量153

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery ViewUI

本文链接：https://blog.youkuaiyun.com/yujun200/article/details/84238943

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于Struts2框架实现的省级联动选择器示例，通过Action层处理请求并返回JSON数据，前端使用jQuery进行AJAX调用及DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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文件

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