java级联下拉列表实例_java吧

java吧关注：1,275,242贴子：12,789,883

18回复贴，共1页

java级联下拉列表实例

1、结果显示页面index.jsp关键代码：
<%@ page contentType="text/html; charset=GBK" language="java" import="java.sql.*" errorPage="" %>
<jsp:useBean id="conn" scope="page"/>
<%
ResultSet rs_super=conn.executeQuery("select ID,superType from V_type group by ID,superType");
int superID=-1;
int P_superID=-1;
String superName="";
if(rs_super.next()){
superID=rs_super.getInt(1);
}
%>
<html>
<head>
<title>无刷新的级联下拉列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script language="javascript" src="js/AjaxRequest.js"></script>
</head> <script language="javascript">
function selSubType(val){
var loader=new net.AjaxRequest("selSubType.jsp?superID="+val+"&nocache="+new Date().getTime (),deal,onerror,"GET");
}
//回调函数
function deal(){
document.getElementById("subType").innerHTML=this.req.responseText;
}
function onerror(){
alert("出错了");
}
</script>
<script language="javascript">
function mycheck(){
form1.submit();
}
</script>
<body onLoad="selSubType(<%=superID%>)">
<form action="goods_add_deal.jsp" method="post" name="form1">
所属大类： <select name="select" id="select" onChange="selSubType(this.value)">
<%rs_super.first();
do{
superID=rs_super.getInt(1);
superName=rs_super.getString(2);
%>
<option value="<%=superID%>"><%=superName%></option>
<%}while(rs_super.next());%>
</select>
所属小类：<span id="subType">正在调用小分类信息……</span></br>
<input name="Button2" type="button" value="保存" onClick="mycheck()">
 
<input name="Submit22" type="reset" value="重置">
 
<input name="Submit3" type="button" value="返回" onClick="JScript:history.back(-1)">
</form>
</body>
</html>
I

送TA礼物

1楼2013-09-18 14:07回复

2、onChange方法处理页面selSubType.jsp页面，关键代码：
<%@ page contentType="text/html; charset=GBK" language="java" import="java.sql.*" errorPage="" %>
<jsp:useBean id="conn" scope="page"/>
<%
int P_superID=-1;
int superID=-1;
String superName="";
ResultSet rs_sub=null;
//查询所属小类的默认选项
if(request.getParameter("superID")=="" || request.getParameter("superID")==null){
P_superID=superID;
}else{
P_superID=Integer.parseInt(request.getParameter("superID"));
}
rs_sub=conn.executeQuery("select * from tb_subType where superType="+P_superID);
int subID=-1;
String subName="";
%>
<select name="typeID" id="typeID">
<%while(rs_sub.next()){
subID=rs_sub.getInt(1);
subName=rs_sub.getString(3);
%>
<option value="<%=subID%>"><%=subName%></option>
<%}%>
</select>
I

2楼2013-09-18 14:07

不感兴趣

开通SVIP免广告

3、以上内容使用到的js文件，关键代码：
var net=new Object(); net.AjaxRequest=function(url,onload,onerror,method,params){
this.req=null;
this.onload=onload;
this.onerror=(onerror) ? onerror : this.defaultError;
this.loadDate(url,method,params);
}
net.AjaxRequest.prototype.loadDate=function(url,method,params){
if (!method){
method="GET";
}
if (window.XMLHttpRequest){
this.req=new XMLHttpRequest();
} else if (window.ActiveXObject){
this.req=new ActiveXObject("Microsoft.XMLHTTP");
}
if (this.req){
try{
var loader=this;
this.req.onreadystatechange=function(){
net.AjaxRequest.onReadyState.call(loader);
} this.req.open(method,url,true);
if(method=="POST"){
this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
this.req.send(params);
}catch (err){
this.onerror.call(this);
}
}
} net.AjaxRequest.onReadyState=function(){
var req=this.req;
var ready=req.readyState;
if (ready==4){
if (req.status==200 ){
this.onload.call(this);
}else{
this.onerror.call(this);
}
}
}
net.AjaxRequest.prototype.defaultError=function(){
alert("连接错误:"+this.req.readyState+"错误码: "+this.req.status);
}
I

3楼2013-09-18 14:08

连接数据库的java代码这里就不贴出来了，那个实在是太多了。下面是数据库表数据：
tb_subtype表
subid,superType,subname
('11111','0000','a1县'),
('11112','0000','a2县'),
('11113','0000','a3县'),
('11114','0000','a4县'),
('11115','0001','b1县'),
('11116','0001','b2县'),
('11117','0001','b3县');
v_type表
ID,superType
('0000','a区'),
('0001','b区');I

4楼2013-09-18 14:08