今天用到ajax5级联动，后台调用struts的action,这里只记录前台调用的代码

最新推荐文章于 2017-07-19 19:09:09 发布
最新推荐文章于 2017-07-19 19:09:09 发布
阅读量358 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： java技术 java代码记录 js学习记录 eclipse+mysql
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u011295626/article/details/51112033
本文介绍了一个使用Java和jQuery实现的动态下拉框选择器案例。通过AJAX技术，根据用户的选择逐级更新下拉菜单选项。涉及城市、区县、等级等多个级别的联动选择。

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

<%@ page language="java" import="java.util.*" pageEncoding="utf-8" contentType="text/html; charset=utf-8"
%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>success</title>
<script src="<%=path%>/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

function sel(){
document.getElementById("grade").disabled=true;
document.getElementById("sname").disabled=true;
document.getElementById("unit").disabled=true;
var city =  $("#city").val();
//alert(contry);
var county = $("#county")[0];//取hero下拉框
county.options.length=0;//把下拉框清空

//生成一个请选择option
var opt = document.createElement("option");
opt.value="";
opt.text="--请选择--";
//把option加入到所有的选项中
county.options.add(opt);
var grade = $("#grade")[0];//取hero下拉框
grade.options.length=0;//把下拉框清空
var opt1 = document.createElement("option");
opt1.value="";
opt1.text="--请选择--";
grade.options.add(opt1);

var sname = $("#sname")[0];//取hero下拉框
sname.options.length=0;//把下拉框清空
var opt2 = document.createElement("option");
opt2.value="";
opt2.text="--请选择--";
sname.options.add(opt2);
var unit = $("#unit")[0];//取hero下拉框
unit.options.length=0;//把下拉框清空
var opt = document.createElement("option");
opt.value="";
opt.text="--请选择--";
unit.options.add(opt);

var url = "showUnitAction!getAllcounty?unit.city="+city+"&time="+new Date();
//ajax取json数据(data)
$.getJSON(url,function(data){
   //data = eval(data);
   //遍历data
$.each(data,function(){
//取每一次遍历的内容(this)
var id = this["county"]
   var name = this["county"];
//alert(id+","+heroName);

opt = document.createElement("option");
opt.value=id;
opt.text=name;
county.options.add(opt);

});
});
}
function selcounty(){

var city =  $("#city").val();
var county =  $("#county").val();
//alert(contry);
document.getElementById("sname").disabled=true;
document.getElementById("unit").disabled=true;
document.getElementById("grade").disabled=false;
var grade = $("#grade")[0];//取hero下拉框
grade.options.length=0;//把下拉框清空
var opt = document.createElement("option");
opt.value="";
opt.text="--请选择--";
//把option加入到所有的选项中
grade.options.add(opt);
var sname = $("#sname")[0];//取hero下拉框
sname.options.length=0;//把下拉框清空
var opt2 = document.createElement("option");
opt2.value="";
opt2.text="--请选择--";
sname.options.add(opt2);
var unit = $("#unit")[0];//取hero下拉框
unit.options.length=0;//把下拉框清空
var opt = document.createElement("option");
opt.value="";
opt.text="--请选择--";
unit.options.add(opt);

var url = "showUnitAction!getAllgrade?unit.city="+city+"&unit.county="+county+"&time="+new Date();
//ajax取json数据(data)
$.getJSON(url,function(data){
   //data = eval(data);
   //遍历data
$.each(data,function(){
//取每一次遍历的内容(this)
var id = this["grade"]
   var name = this["grade"];
//alert(id+","+heroName);

opt = document.createElement("option");
opt.value=id;
opt.text=name;
grade.options.add(opt);

});
});
}

function selgrade(){

var city =  $("#city").val();
var county =  $("#county").val();
var grade =  $("#grade").val();
document.getElementById("sname").disabled=false;
document.getElementById("unit").disabled=true;
//alert(contry);
var sname = $("#sname")[0];//取hero下拉框
sname.options.length=0;//把下拉框清空
//生成一个请选择option
var opt = document.createElement("option");
opt.value="";
opt.text="--请选择--";
//把option加入到所有的选项中
sname.options.add(opt);
var unit = $("#unit")[0];//取hero下拉框
unit.options.length=0;//把下拉框清空
var opt = document.createElement("option");
opt.value="";
opt.text="--请选择--";
unit.options.add(opt);

var url = "showUnitAction!getAllname?unit.city="+city+"&unit.county="+county+"&unit.grade="+grade+"&time="+new Date();
//ajax取json数据(data)
$.getJSON(url,function(data){
   //data = eval(data);
   //遍历data
$.each(data,function(){
//取每一次遍历的内容(this)
var id = this["substationid"]
   var name = this["substationName"];
//alert(id+","+name);
opt = document.createElement("option");
opt.value=id;
opt.text=name;
sname.options.add(opt);

});
});
}
function selsname(){

var sname =  $("#sname").val();
document.getElementById("unit").disabled=false;
var unit = $("#unit")[0];//取hero下拉框
unit.options.length=0;//把下拉框清空
//生成一个请选择option
var opt = document.createElement("option");
opt.value="";
opt.text="--请选择--";
//把option加入到所有的选项中
unit.options.add(opt);

var url = "showUnitAction!getAllunit?unit.substationid="+sname+"&time="+new Date();
//ajax取json数据(data)
$.getJSON(url,function(data){
   //data = eval(data);
   //遍历data
$.each(data,function(){
//取每一次遍历的内容(this)
var id = this["unitId"]
   var name = this["unitName"];
//alert(id+","+name);
opt = document.createElement("option");
opt.value=id;
opt.text=name;
unit.options.add(opt);

});
});
}
</script>
  </head>
  
  <body>
   设备维护员 <br>
   <select id="city" onchange="sel();">
    <option value="">--请选择--</option>
    <s:iterator value="#request.citylist">
          <option value="<s:property value='city'/>"><s:property value="city"/></option>
         </s:iterator>
 </select>
 <select id="county" onchange="selcounty();">
    <option value="">--请选择--</option>
    <s:iterator value="#request.countyList">
          <option value="<s:property value='county'/>"><s:property value="county"/></option>
         </s:iterator>
 </select>
  <select id="grade" onchange="selgrade();" disabled="true">
    <option value="">--请选择--</option>
    <s:iterator value="#request.gradeList">
          <option value="<s:property value='grade'/>"><s:property value="grade"/></option>
         </s:iterator>
 </select>
<select id="sname" onchange="selsname();" disabled="true">
    <option value="">--请选择--</option>
    <s:iterator value="#request.nameList">
          <option value="<s:property value='substationid'/>"><s:property value="substationName"/></option>
         </s:iterator>
 </select>
 <select id="unit" disabled="true">
    <option value="">--请选择--</option>
    <s:iterator value="#request.unitList">
          <option value="<s:property value='unitId'/>"><s:property value="unitName"/></option>
         </s:iterator>
 </select>
  </body>
</html>
ajax 五级联动 下拉列表
06-28
ajax 动态读取数据库数据 数据库是sql server2000的 文件需要另外下载<>
应用Struts2+Ajax---->SSH2技术实现全国省市三级联动，带Mysql数据库数据文件，可以直接导入数据库
01-08
哥们周日弄了一天要实现这个功能可是没有实现，无奈只能优快云下载类似功能的实现，可是都不能满足我的要求，有没有！ 一下狠心，继续自己弄，过程经历很多困难，比如用<s:iterator>后，怎么读到循环后的每条数据的ID？后来借助Jquery实现。现在一想那个胜利的场景，还历历在目，那种胜利的喜悦，真的只有自己去实现才能体会到；那种经历多次尝试，又突然有了灵感，马上试验，继续失败，真的想放弃了，可是内心有不甘有没有，周一上班都总想可以的解决方案，晚上马上试验…… 到底是不是真的，下载看看就知道了! 请感谢我的分享！ 1.导入项目到空间 2.更新数据库的连接信息 3.生成数据库表，并导入附件数据库的文件 4.访问：/pcd/page 可以访问页面，体验交互 5.请回来点赞！
ajax+ssh实现省份城市级联查询
11-09
ajax+ssh 实现省份城市级联查询 应用实例
基于ajax,jQuery实现从Mysql数据库获取数据实现省市区三级联动
01-08
基于ajax,jQuery实现从Mysql数据库获取数据实现省市区三级联动，选择完省才能选择市，同理于市区，换选其他省市时，可自动清除已选择的市、区。使用eclipse+Mysql开发，压缩文件内有说明。
ajax,struts2,json实现省市区三级联动源码含全国省市区数据库
11-29
ajax,struts2,json实现省市区三级联动源码含全国省市区数据库
Struts2结合Ajax实现二级联动功能详解
在探讨如何使用Struts2和Ajax实现二级联动功能之前，我们先了解二级联动的概念。二级联动通常指的是在网页上的两个下拉列表（select）之间建立联动关系，当用户选择第一个下拉列表中的某个选项后，第二个下拉列表会...
struts2 jquery json ajax 三级联动菜单
01-30
比如，当用户在第一级菜单中做出选择后，通过Ajax调用Struts2的Action，Action返回JSON格式的数据，这些数据随后被jQuery解析并用来填充第二级菜单。 JSON（JavaScript Object Notation）是一种轻量级的数据交换...
Struts实现二级联动与MySQL连接池的代码教程
在本文中，我们将详细探讨在Struts框架中实现二级联动功能，并结合MySQL数据库连接池的使用。这涉及到Struts 2框架、前端JavaScript技术、后端Java代码以及数据库交互的相关知识点。 ### Struts 二级联动 Struts 2...
实现Ajax+Struts+Hibernate二级联动查询的完整源码示例
在Ajax+Struts+Hibernate的环境中，二级联动查询的大致实现步骤如下： 1. 用户在第一个下拉列表中选择一个选项。 2. 使用JavaScript（或jQuery等库）触发Ajax请求。 3. Struts的ActionServlet接收请求，并委托给...
Struts2+Hibernate+ajax实现的三级联动技术
标题中提到的“Struts2+Hiberante+ajax+Mysql 三级联动”指的是在Web开发中利用这些技术栈实现三级数据联动的动态网页功能。三级联动通常是指在一个Web页面上，通过三个下拉列表框（或类似的组件），当选择其中一个...
jsp采用ajax提交list到struts2传值
rotman173的专栏
10-23 1864
保证数组能用ajax提交到struts2的list中必须  1  添加struts2的json插件struts2-json-plugin-2.1.8.1.jar     同时struts.xml中加上json的拦截器              2 ajax的contentTypt设置为application/json  3 不能提交json对象、应该将json对象转换成字符串 
Struts2中从数据库中取数据到页面显示的常用方法
weixin_33895657的博客
03-07 922
方法一： 我们在Dao类中从数据库中取出数据后，放入VO类（与表对应的或是与界面对应的）中，然后一层一层返回给Action的相应VO类。 　例如： 　　　Dao类我们是这样编写的： /** * 遍历所有的管理员 * @return */public List<Ems_Manager_VO> listManager(){ Li...
AJAX实现简单的省市二级联动
itmyhome的专栏
12-13 5481
基本思路：前台的下拉框值改变时，AJAX将值传入后台的servlet进行处理，根据不同的值返回不同的JSON数据，然后前台进行解析成字符数组，添加到option中. index.jsp <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + reques
Struts2.2配置json+ajax实现三级联（任意级联）下拉列表框。
ahhmdwg的专栏
11-22 2983
前言：折腾了两天终于实现了ajax的局部刷新，级联下拉列表框。
Struts2+jQuery+ajax+mySql实现省市二级联动
小欣儿的专栏
10-31 1064
Jquery的select操作集合 jQuery获取Select选择的Text和Value: 语法解释： 1. $("#select_id").change(function(){//code...});    //为Select添加事件，当选择其中一项时触发 2. varcheckText=$("#select_id").find("option:selected").text
jquery请求后台struts2传递jon
ge_zhiqiang 专栏
01-10 1050
前台jquery请求     var beanForm = $("form").serialize(); //序列化前台form表单的元素（注意name和javaBean对象字段名字保持一致）     $.dialog.confirm('你确定要保存所填的数据吗？', function(){      $.ajax({          type: "Post",          
使用Ajax和Jquery配合数据库实现下拉框的二级联动
Evan_QB的博客
07-19 2万+
首先我们需要先建立好数据库,将一些数据插入进去 需要两张表: province：省份表 city :          城市表 如图: 然后再在java中建立相关的实体类与之对应 再然后，我们就能开始做jdbc的操作了 public class ConnectionFactory { private static String driver; private stat
Struts2发送ajax请求并在页面显示结果
陈旭的专栏
04-13 2501
今天做到一个模糊查询的功能，是这样的，要求输入企业或个人关键字，根据关键字输入匹配的结果，点击结果进行个人或企业信用记录的查询。        实现思路： 1.前端发送ajax请求到指定action，带参数name。这个请求可以使button的onclick 也可以使input输入框的onkeyup，onkeyup好像更符合自动匹配的风格，不过对于百万条数据可能会有延迟问题影响交互，所以选择第
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值