我跟你说说三级联动的大概流程吧。
首先页面接受第一层下拉框数据。这个应该不难。
然后通过Change_Select()来调用xmlrequest,到后台取第二个下拉框的数据,并且在callback函数中用js完成对第二个下拉框的填充。
第三个下拉框的实现也是一样,当第二个下拉框触发Change_Select2()时,再次从数据库获得第三个下拉框的数据,再在callback2函数中用js完成对第三个下拉框的填充。
三级联动分:AJAX版和JS版
AJAX版-----------------------------------------------------------------------
index.jsp
<%@ page contentType="text/html;charset=gb2312"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
创建下拉框函数:
function BuildSel(str,sel){
sel.options.length=0;
var arrstr = new Array();
arrstr = str.split("|"); //回调数据被拆分成下拉项的字符数组
sel.options.add(new Option( "-----请选择-----",""));
if(str.length>0){
for(var i=0;i<arrstr.length;i++){
var subarrstr=new Array();
subarrstr=arrstr[i].split(","); //每项再次被拆分成下拉项的value,name对数组
if(subarrstr[1]!=" "&&subarrstr[1]!=null)
sel.options.add(new Option(subarrstr[1],subarrstr[0]));
}
sel.options[0].selected=true;
}
}
function GetResult(typeStr,dropid){
//创建Ajax对象
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
//发送Ajax请求
var linkurl="dropData.jsp?typeStr="+typeStr+"&numValue="+dropid;
http_request.open("GET",linkurl,false);
http_request.send(null);
//获取回调数据
var returntxt=unescape(http_request.responseText.replace(" "));//空值转换
if(returntxt.length>0){
//document.all.ajax.innerHTML="服务器返回结果:<font color='red'>"+returntxt+"</font> [Powered by AJAX]"
if(typeStr=="wx") BuildSel(returntxt,document.getElementById('sel2'));
if(typeStr=="khdb") BuildSel(returntxt,document.getElementById('sel3'));
}else{document.all.ajax.innerHTML=""}
}
</script>
<form name="form1" method="post" action="">
<table width="90%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
<tr bgcolor="F1F1F1">
<td height="24" colspan="2" align="center">琥珀无限级联动菜单-AJAX版 [睿翔网络科技修改]</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="12%" height="24" align="center">行区:</td>
<td>
<select name="sel1" id="sel1" onChange="GetResult('wx',this.value)">
<option value="" selected>-----请选择-----</option>
</select>
<input type=text name=txt1 id=txt1 size=10>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="24" align="center">外县:</td>
<td>
<select name="sel2" id="sel2" onChange="GetResult('khdb',this.value)"">
<option value="" selected>-----请选择-----</option>
</select>
<input type=text name=txt2 id=txt2 size=10>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="24" align="center">客户代表:</td>
<td>
<select name="sel3" id="sel3">
<option value="" selected>-----请选择-----</option>
</select>
<input type=text name=txt3 id=txt3 size=10>
</td>
</tr>
<tr bgcolor="F1F1F1">
<td height="24" colspan="2" align="center" id="ajax"> </td>
</tr>
</table>
<script language="JavaScript">
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
var linkurl="dropData.jsp?typeStr=xq";
http_request.open("GET",linkurl,false);
http_request.send(null);
var returntxt=unescape(http_request.responseText)
BuildSel(returntxt,document.getElementById('sel1'));
</script>
</form>
</body>
</html>
//*********************************************************
dropData.jsp(连接数据库的JSP页面)
<%@ page contentType="text/html;charset=gb2312"%>
<% response.addHeader("Cache-Control","no-cache"); %>
<%@ page import="java.sql.*"%>
<%Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();
String url="jdbc:oracle:thin:@130.36.30.209:1521:crm";
String user="crm";
String password="crmrnd";
String sqlStr="11";
Connection conn= DriverManager.getConnection(url,user,password);
Statement stmt=conn.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE);
String typeStr = request.getParameter("typeStr");
String numValue = request.getParameter("numValue");
if(typeStr.equalsIgnoreCase("xq"))
sqlStr = "select * from crm_tbm_xq";
else if(typeStr.equalsIgnoreCase("wx"))
sqlStr = "select * from crm_tbm_wx where xq = '"+numValue+"'";
else if(typeStr.equalsIgnoreCase("khdb"))
sqlStr = "select * from crm_user_name Where wx = '"+numValue+"'";
ResultSet rs=stmt.executeQuery(sqlStr);
while(rs.next()){%><%=rs.getString(1) %>,<%=rs.getString(3) %>|<%}%> //"value,name | value,name"
<%rs.close();
stmt.close();
conn.close();
%>
js版----------------------------------------------------------------------------
<html>
<!--级联下拉列表-->
<head>
<script src="prototype-1.6.0.3.js"></script>
<script>
function doAction(index){
var arr = new Array;
arr[0] =[new Option('--研究方向--','-1')];
arr[1] =[new Option('商务英语','english1'),new Option('英美文学','english2')];
arr[2] =[new Option('网格计算','computer1'),new Option('计算机软件','computer2'),
new Option('图形计算','computer3')];
//$('s2').length = 0;
$('s2').innerHTML = '';
for(i=0;i<arr[index].length;i++){
$('s2').options[i] =arr[index][i];
}
}
</script>
</head>
<body style="font-size:30px;">
<div id="d1">
<div id="d1_head">专业选择</div>
<div id="d1_content">
<form>
<select name="s1" id="s1" onchange="doAction(this.selectedIndex);">
<option value="-1">--专业--</option>
<option value="english">英语</option>
<option value="computer">计算机</option>
</select>
<select name="s2" id="s2" style="width:120px;">
<option value="-1">--研究方向--</option>
</select>
<input type="submit" value="确认"/>
</form>
</div>
</div>
</body>
</html>
相关推荐
里面有四个文件,ajax++jsp二级联动下拉框,ajax实现无刷新查询,Ajax异步
struts2+jsp+json+javascript实现的三级下拉菜单,没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp
JSP页面,采用ajax和json技术,实现了多个下拉框之间的二级联动,也就是选择第一个下拉框的类容之后,后面的下拉框的类容动态改变
包里有数据库文件,可以导入,包引入后用tomcat就能启动,servlet是通过JSP格式完成联动框,servlet02是通过json格式完成联动框,jdbc已经封装写好,用户名密码只需要改变数据库配置文件即可,Ajax也封装成js文件,...
Ajax与ASP网页交互动态添加删除数据一例 Asp+Ajax无限级联动下拉框菜单Access版 ASP 树形菜单TreeView 多样式版 Ajax仿iGoogle双击编辑、网页拖动完整实例 ASP+jQuery无刷新读写数据库操作 Ajax提交数据实例_Ajax+...
当二级联动要实现数据库时实读取时,比较麻烦,本例子用Ajax可以简单实现 ajax+Jsp+js+servlet
1、Jsp页面 //为了避免jquery中的'$'与其它的'$'冲突,在此将jquery中的'$'重命名为'jQuery' var jQuery=$; //初始化数据 jQuery(document).ready(function(){ getProvince(); });
文件包括了:项目工程(关键部分注解详细),以及sql文件。功能:选中第一个下拉框,局部刷新第二个下拉框的值,且...主要使用了MySQL,jdbc,servlet,jsp,而异步是使用了原生的JS和XMLHttpRequest异步对象实现的。
使用ajax和servlet实现两级下拉框的动态级联
这是一款堪称最完美的下拉框组件,特点如:美化的并且可自定义的外观、使用简单、支持分组、下拉列表展开的方向智能化、下拉框可编辑、集成了ajax联动功能、自定义下拉列表的列数、完美的浏览器兼容性等。...
本文实例为大家分享了Ajax二级联动菜单的具体代码,供大家参考,具体内容如下 index.jsp <%@ page language=java pageEncoding=UTF-8%> <html> <head> <title>二级菜单联动演示</...
本文实例讲述了jQuery+jsp下拉框联动获取本地数据的方法。分享给大家供大家参考,具体如下: JQuery下拉框联动很好的体现了Ajax的按需取数据的要求,减小数据的交互量。(点击此处下载源代码) 下面的实例使用Json将...
这个例子是实现省、市二级联动,当选择某一省时,改省下面的市就会在另一个下拉框显示出来。在本例中AJAX通过解析XML文件得到的数据传回到jsp页面,其中省市均是从数据库取到的值: jsp页面代码: 代码如下: <&#...
[removed]=function() {//页面加载时的函数 } function Change_Select(){//当第一个下拉框的选项发生改变时调用该函数 var province = document.getElementById(‘province’).value; var url =
本来认为这个很好实现,但实际改起来的时候发现问题多多,主要问题是原有的地区联动是用js实现的,它的数据源是一个xml文件,当然如果下拉框是服务器端控件那么问题是很好解决的,现在是html控件一下子似乎还真有些...
一般情况下,select下拉框中的数据都是固定的或者直接在jsp中读取列表值显示。但是,这次要实现select与别的选项框联动,也就是要动态添加option数据。查阅了很多资料,终于搞定。下面就分享一下,如何利用jQuery和...
摘要:脚本资源,Ajax/JavaScript,多级联动菜单,下拉框 jquery_chained基于jQuery的一款很不错的jQuery 多级联动插件多级联动插件,本例运行于PHP环境,也可以在ASP、JSP、中使用。jQuery 发展到现在,拥有相当多的...