`
jinjc
  • 浏览: 15271 次
  • 性别: Icon_minigender_1
  • 来自: 江苏
社区版块
存档分类
最新评论

jsp使用jquery+ajax实现二级联动下拉菜单

阅读更多
t1.jsp

<%@ page contentType="text/html;charset=gb2312"%>
<html>
<head>
<title>联动的下拉菜单</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#wc").change(function(){
		$.getJSON("t2.jsp",{index: $(this).val()}, function(myJSON){
			var myOptions = '';
			for (var i = 0; i < myJSON.length; i++) {
                myOptions += '<option value="' + myJSON[i].optionValue + '">' + myJSON[i].optionValue + '</option>';			            }
			$("#gx").html(myOptions);
		});
	});	
	$("#wc").change();
})
</script>
</head>
<body>
	<select name="wc" id="wc">
		<option>一</option>
		<option>二</option>
		<option>三</option>
	</select>
	<select name="gx" id="gx">
	</select>
</body>
</html>


t2.jsp

<%@ page contentType="text/html;charset=gb2312"%>
<%
String index = new String(request.getParameter("index").getBytes("iso8859-1"),"utf-8");
String JSON_text = "";
	
if(index.compareTo("一")==0)
  JSON_text ="[{optionValue:'一一'},{optionValue:'一二'}]";
else if(index.compareTo("二")==0)
  JSON_text ="[{optionValue:'二一'},{optionValue:'二二'}]";
else if(index.compareTo("三")==0)
  JSON_text ="[{optionValue:'三一'},{optionValue:'三二'}]";
else
  JSON_text ="[{optionValue:'"+index+"'}]";
out.println(JSON_text);
%>
分享到:
评论
2 楼 jinjc 2010-04-01  
fiwrc 写道
楼主能说的再详细点吗?   直接跑就不好使~~~~~~ 

这已经是全部源代码了啊...刚刚又测试了一遍,没有问题。你是不是jquery路径不对啊?
1 楼 fiwrc 2010-04-01  
楼主能说的再详细点吗?   直接跑就不好使~~~~~~ 

相关推荐

    jQuery+ajax实现三级级联

    在这个“jQuery+ajax实现三级级联”的实例中,我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统,这在数据筛选和表单填写中十分常见,如地区选择、部门分类等场景。 首先,jQuery是一个轻量级...

    ssh+jquery+ajax二级联动

    在这个"ssh+jquery+ajax二级联动"项目中,开发者可能创建了一个简单的Web应用,实现了基于Ajax的二级联动选择功能。这通常在多级下拉菜单或地区选择等场景中常见,例如:省份选择后,城市列表会动态加载更新。 1. *...

    jquery+ajax+jsp+servlet实现二级级联菜单

    ### 使用jQuery、Ajax、JSP与Servlet实现二级级联菜单 #### 一、项目背景与技术栈概述 本文档将详细介绍如何使用jQuery、Ajax、JSP与Servlet来实现一个简单的二级级联菜单功能。该功能常见于许多Web应用程序中,如...

    JSP+AJAX三级级联及更多级的实现

    在这个“JSP+AJAX三级级联及更多级的实现”主题中,我们将深入探讨如何通过这两种技术构建一个能够实现多级联动下拉菜单的系统,这种功能常见于地址选择、部门结构展示等场景。 首先,JSP是Java的一种服务器端脚本...

    jsp结合jquery实现省市区三级联动下拉(含数据库脚本) .rar

    jsp结合jquery实现省市区三级联动下拉。不少系统都需要实现省市区三级联动下拉,像人口信息管理、电子商务网站、会员管理等,都需要填写地址相关信息。而用ajax实现的无刷新省市区三级联动下拉则可以改善用户体验,...

    Ajax + jQuery + json + js + jsp + servlet 三级联动

    在IT行业中,"三级联动"是一种常见的前端交互设计,它通常应用于下拉选择框或级联菜单中。这种设计能够帮助用户在多个关联的选择项之间建立逻辑关系,以过滤和展示相关数据。在这个项目中,"Ajax + jQuery + json + ...

    struts2+hibernate+spring实现的二级联动下拉列表.zip

    在二级联动下拉列表中,Struts2的动作类(Action)是业务逻辑的入口点,它接收并处理来自前端的请求,通过调用Service层的方法获取需要的数据,然后将这些数据封装到结果对象(Value Stack)中,供JSP页面使用。...

    纯jsp实现3级联动菜单

    在3级联动菜单中,当用户在第一级菜单中做出选择时,我们可以用Ajax请求第二级菜单的数据,依此类推。 6. JSON:Ajax请求通常返回JSON格式的数据,因为JSON易于解析且传输效率高。服务器端可以将菜单数据转化为JSON...

    Ajax JavaWeb JS 三级联动

    6. **二级联动**:同理,监听二级菜单的选择事件,发送Ajax请求获取三级菜单数据,更新三级菜单。 7. **错误处理**:在整个过程中,还需要添加适当的错误处理机制,比如请求失败或数据解析错误时的提示。 在实际...

    ajax+json实现多级联动菜单

    ### 使用Ajax+JSON实现多级联动菜单的知识点详解 #### 一、背景介绍与概念解析 随着互联网技术的发展,用户对交互式应用的需求日益增长。RIA(Rich Internet Applications)概念的提出更是加速了这一趋势。其中,...

    二级联动菜单(jsp mysql)

    在这个“二级联动菜单(jsp mysql)”的实例中,我们将探讨如何使用JavaServer Pages (JSP) 和 MySQL数据库来实现这种功能。 首先,JSP是Java的一种动态网页技术,它允许开发人员在HTML页面中嵌入Java代码,从而...

    ajax jequry jsp二级联动

    【Ajax jQuery JSP 二级联动】是Web开发中常见的交互技术,主要用于提升用户体验,通过异步数据传输实现在两个下拉菜单之间动态关联的效果。在这个简单的例子中,我们将探讨如何利用Ajax、jQuery库和JSP页面来实现这...

    SSM+Maven实现三级联动

    开发者可能会在Controller中定义处理请求的接口,Service层处理业务逻辑,Mapper层负责与数据库交互,而前端可能使用JSP或Thymeleaf等模板引擎来渲染页面,同时借助jQuery或其他JavaScript库实现AJAX请求,动态更新...

    JSP+Ajax经典开发实例

    - 实现动态下拉列表联动,一个下拉框的选择会异步更新另一个下拉框的内容。 - 分页查询功能,用户点击页码,Ajax请求新的数据并更新页面。 - 实时聊天系统,用户发送的消息能立即显示在聊天窗口中,无需刷新页面。 -...

    用ajax实现的jsp三级联动

    在网页开发中,"三级联动"通常指的是在三个下拉菜单之间通过选择一个选项自动更新其他两个下拉菜单的内容。这种交互方式常用于地区选择、类别筛选等场景,为用户提供流畅的浏览体验。本示例中,我们用AJAX(异步...

    JSP结合jQuery实现省市区三级联动有SQL数据

    总的来说,JSP与jQuery结合实现的省市区三级联动是一种常见的网页交互技术,它涉及到服务器端编程、前端脚本、数据库设计和Ajax通信等多个环节。掌握这种技术能帮助开发者构建更加友好和高效的Web应用。

    关于jquery(ajax)web四级联动

    在本例中,我们将使用jQuery的AJAX技术来实现在Web项目中选择地区的四级联动效果。 首先,我们需要创建一个动态Web工程。动态Web工程(Dynamic Web Project)是Eclipse中的项目类型,它允许我们编写包括Java在内的...

    下拉框二级联动

    本文将详细讨论“下拉框二级联动”这一主题,以及如何利用AJAX和JSON技术来实现这一功能。 首先,我们要理解什么是二级联动。在多级选择的场景下,二级联动指的是当用户在一个下拉框(Dropdown)中做出选择时,第二...

    jquery实现三级联动

    在网页开发中,联动下拉菜单是一种常见的交互设计,它允许用户在选择某一选项时,自动更新相关的下拉菜单选项。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和Ajax交互等任务,因此使用jQuery实现...

    Jquery实现ajax二级级联查询

    本主题聚焦于“Jquery实现ajax二级级联查询”,这是一个常见的前端交互设计,常见于下拉菜单联动,例如省份选择后自动更新城市选择。在这个场景中,我们通常会利用服务器端(如JSP或Servlet)动态生成XML文件,因为...

Global site tag (gtag.js) - Google Analytics