最近项目用到了,不刷新网页实现下拉框联动,所以写了个小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级联下拉框源码 AJAX级联下拉框源码 AJAX级联下拉框源码
Ajax实现下拉框三级联动,实现数据库动态连接,无刷新动态更新 MyEclipse+Ajax+SQL Server 2005
下拉框 ajax 注册 下拉框 ajax 注册 下拉框 ajax 注册
Ajax实现下拉框无刷新
ajax实现动态从数据库模糊查询显示到下拉框中(ajax方法返回Dataset的例子)
AJAX 动态下拉框eclipse ,及数据
ajax 二级下拉框ajax 实现二级下拉框,地址联动,xmlHttp,serverlet,java,ajax 实现二级下拉框,地址联动,xmlHttp,serverlet,java,
带搜索过滤ajax加载下拉框代码是一款支持选项搜索过滤和Ajax远程加载的select下拉选择框jQuery插件。
功能:选中第一个下拉框,局部刷新第二个下拉框的值,且每次选中第一个下拉框,第二个下拉框都会有对应的值提供选择。主要使用了MySQL,jdbc,servlet,jsp,而异步是使用了原生的JS和XMLHttpRequest异步对象实现的...
ajax 自动 提示,输入框输入数据,会出现提示下拉框,有源码,可在Myeclipse下运行,简单易用,适合初学者
Java POI下载Excel模板 Excel带有下拉框的模板,并有详细注释,生成exlcel的下拉框,必填项标红,数字栏位防止科学计数法,并设置Excel标题样式
自己做了一个jquery ajax异步请求,获得一个list对象的下拉框例子自己做了一个jquery ajax异步请求,获得一个list对象的下拉框例子
ajax返回datatable绑定下拉框.docx
如下所示: <!DOCTYPE html> <html> <head> <title>排课设置<...content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">...link rel="stylesheet
java swing 多选下拉框 支持动态加载数据 (优化了网上的下拉框代码)
本篇文章主要介绍了ajax实现动态下拉框示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
jquery 实现ajax动态加载下拉框搜索框内容。
绝对物超所值,菜鸟必备,有少量注释,不用继续找,我更懂你
级联下拉框级联下拉框级联下拉框级联下拉框级联下拉框级联下拉框级联下拉框级联下拉框