最近项目用到了，不刷新网页实现下拉框联动，所以写了个小Demo，现在写下来以备日后参考和跟大家分享一下。
下面直接贴代码吧
1、页面文件index.jsp，在这里使用jquery的ajax对象$.ajax。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="js/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
function validatorloginName(){
//$("#loginName").val()等同于document.getElementById("loginName").value;
var loginName=$("#loginName").val();
//采用jQuery的ajax方式提交请求
$.ajax({
type: "POST",
url: "VaildateName",
data: "loginName="+loginName,
success: function(data){
if(data != ""){
setCounty(data);
}
}
});
}
//当改变省份时设置城市
function setCounty(result){
//得到每组
var arrydata = result.split(";");
var county = document.getElementById("toCity");
clearSel(county); //清空城市
county.options.add(new Option("请选择城市..."));
$.each(arrydata, function(){
var value = this.split(",")[0];
var text = this.split(",")[1];
var option = new Option(text, value);
county.options.add(option);
});
}
// 清空下拉列表
function clearSel(oSelect){
while(oSelect.childNodes.length>0){
oSelect.removeChild(oSelect.childNodes[0]);
}
}
</script>
<title>AJAX获得下拉框选择项</title>
</head>
<body>
<FORM id="myform" method="post">
下拉框
<select name="loginName" id=loginName
onchange="validatorloginName();">
<option value="">
请选择...
</option>
<option value="a">
北京城区
</option>
<option value="b">
中国城市
</option>
</select>
联动框
<select name="toCity" id="toCity">
<option value="">
请选择城市...
</option>
</select>
</FORM>
</body>
</html>
2、java后台处理类，返回下拉框内容。
package com.me;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@SuppressWarnings("serial")
public class VaildateName extends HttpServlet {
public VaildateName() {
super();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
String loginName = request.getParameter("loginName").toString();
String tempStr = "";
if ("a".equals(loginName)) {
tempStr = "1,海淀区;2,朝阳区;3,东城区;4,西城区;5,丰台区;6,石景山区;7,崇文区;8,宣武区";
} else if ("b".equals(loginName)) {
tempStr = "1,上海;2,北京;3,天津;4,广州;5,辽宁";
}
response.getWriter().write(tempStr);// 此值jquery可以接收到
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
3、web.xml，配置servlet。
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>VaildateName</servlet-name>
<servlet-class>com.me.VaildateName</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>VaildateName</servlet-name>
<url-pattern>/VaildateName</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
到这里就实现了不刷新网页实现下拉框联动功能。希望对大家有用吧。
更多开发内容欢迎访问：
苏岳宁博客
下面是工程压缩包
分享到：
相关推荐
**Ajax实现下拉框三级联动**是Web开发中一种常见的交互设计，主要用于提高用户体验，让用户在选择一项数据时，能够即时地看到与之关联的下级数据，而无需等待整个页面重新加载。这种技术通常应用于地址选择、产品...
Eclipse是流行的Java开发IDE，对于AJAX项目，开发者可以使用Eclipse的插件，如Ajax Toolkit Framework (ATF) 或者集成其他JavaScript库如jQuery，来更方便地开发和调试AJAX应用。这些工具提供了代码补全、调试支持...
本文将详细讲解如何使用Ajax实现从数据库进行模糊查询，并将结果显示到下拉框（Dropdown List）中，这里我们将以一个具体例子——通过Ajax方法返回Dataset来阐述整个过程。 首先，我们需要在服务器端设置一个能够...
在现代Web开发中，用户体验的重要性不言而喻。...通过这样的方式，用户可以在选择下拉框时不需等待页面刷新，从而获得更为流畅的浏览体验。这一技术在现代Web应用中广泛使用，极大地提升了交互效率和用户满意度。
AJAX级联下拉框是一种常见的前端交互设计，它利用Ajax技术实现在用户选择一个下拉选项时，动态地更新另一个相关联的下拉框内容。这种功能在数据关联、筛选和表单填写中非常常见，例如省份和城市的选择，类别和子类别...
Myeclipse是一款集成开发环境，适用于Java Web项目，因此这个示例可以在Myeclipse中运行。 标签“ajax自动提示含有下拉框”进一步确认了这个项目的核心功能，即利用Ajax实现的带有下拉提示的输入组件。 从压缩包的...
在这个特定的场景中，我们讨论的是如何使用Ajax实现二级下拉框的联动，以及涉及到的技术如Servlet、Java和XMLHttp。 首先，二级下拉框联动通常用于地理信息的选择，例如省份选择后，城市下拉框自动更新对应省份的...
"带搜索过滤ajax加载下拉框代码.zip"提供的解决方案正针对这一需求，它是一个基于jQuery的插件，旨在提升用户体验，使得在大型数据集中的选择和查找过程更加便捷。 首先，这个插件的核心功能是**搜索过滤**。它允许...
本教程将详细讲解如何利用AJAX实现级联下拉框的功能，这是一种常见的用户界面交互设计，常用于如地区选择、商品分类等场景，让用户能够逐步细化他们的选择。 级联下拉框指的是一个下拉框的选择会影响到另一个下拉框...
在本文中，我们将深入探讨如何使用Java和jQuery AJAX来实现异步请求，从而获取服务器端的一个List对象，并将其数据填充到前端的下拉框（dropdown）中。这个过程涉及到前端与后端的交互，JSON对象的序列化和反序列化...
功能：选中第一个下拉框，局部刷新第二个下拉框的值，且每次选中第一个下拉框，第二个下拉框都会有对应的值提供选择。主要使用了MySQL，jdbc，servlet，jsp，而异步是使用了原生的JS和XMLHttpRequest异步对象实现的...
Java POI下载Excel模板 Excel带有下拉框的模板，并有详细注释，生成exlcel的下拉框，必填项标红，数字栏位防止科学计数法，并设置Excel标题样式
Ajax 返回 DataTable 绑定下拉框 Ajax 是一种使用 JavaScript 和 XML 实现异步请求的技术，主要用于在不刷新整个网页的情况下更新页面的一部分内容。在这个示例中，我们将使用 Ajax 来从服务器端获取数据，并将其...
5. **Listener**：为了响应用户的操作，如打开下拉框或选择项目，我们需要添加监听器，如ActionListener或ItemListener。这些监听器可以捕捉事件并触发相应的操作，如从数据库或网络加载新数据。 6. **User ...
在网页开发中，下拉框（Dropdown）常常用于提供用户选择特定选项的界面元素，而Ajax（Asynchronous JavaScript and XML）则是一种不刷新整个页面就能更新部分网页的技术。结合这两种技术，可以实现动态加载和联动...
Java Swing 是一个用于构建桌面应用程序的图形用户界面（GUI）工具包，它是Java Foundation Classes (JFC)的一部分。在Swing中，我们可以使用多种组件来创建丰富的用户界面，包括日期选择功能。本教程将深入讲解如何...
JavaScript（通常是jQuery库）会监听一级下拉框的`change`事件，当用户选择一项时，触发Ajax请求，服务器返回新的下拉框选项，然后动态更新二级下拉框。 **实现步骤：** 1. 创建HTML结构，包括两个下拉框。 2. 使用...
在Web开发中，动态下拉框是一种常见的交互元素，它允许用户从下拉列表中选择数据，这些数据通常是根据某些条件动态加载的。本文将详细介绍如何使用Ajax实现动态下拉框的功能。 Ajax（Asynchronous JavaScript and ...
例如，当用户在下拉框中选择一项时，通过Ajax发送请求到服务器，服务器根据请求返回对应的数据，然后Ajax在后台更新对应的显示内容，而无需刷新整个页面。 在"Ajax小实例"中，可能包括以下几个关键步骤： 1. **...