下拉框联动问题

有两种方案一个是用JavaScript，一次性将两个select的数据统统取出来，将第二张表的数据放到数组中，通过第一个的change事件来改变，优点，运行速度快，缺点，需编写对应的javascript代码，且无法反映实时数据第二种方案是每次都提交，进行联动，优点，能反映数据库实时数据信息，无须写javascript,缺点，运行速度相对慢，且需要考虑保存用户的已经填写的其他表单数据原理基本上是一样的，就是重载页面，可以参考一下：）
<%@ page language="java" pageEncoding="GB2312" %>
<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>教学信息反馈 >> 首页</title>
</head>
<body bgcolor="#FFFFFF">
<script language="javascript">
function change(){
var type;
type=document.Form.type.value;
if (type=="teacher")
  window.location="index_addIdeas.jsp?type=teacher";
}
</script>
<center>::信息反馈申明：：</center>
<br/><font color="#000000">欢迎您对学校或院（系、部）的教学计划、教学内容、教学方法及手段、教学管理及条件（如教室、实验室等）、教学评价、教师队伍等教学和教学管理工作以及学生的听课、实验、实习、作业、考试及社会实践等学习状况及时提出意见和建议。我们将认真考虑您的意见，调整我们的工作，使学校的教学和教学管理工作做得更好。请将此反馈表交教学信息中心，我们将对您的个人信息严格保密。</font>
<br/><br/><br/>
<form action="do_ideas.jsp" method="post" name="Form">
<TABLE  width="900" align="center" border=1 brcolor=99ccff cellspacing="0" cellpadding="0" bordercolordark="#000000" bordercolorlight="#CCCC99">
  
<tr>
<td width=250 height=23 bgcolor=#CCCC99><font size=2>反馈对象：</font></td>
<td width=714>
<select name="type" size=1 onChange="change()">
<option value="admin">管理员</option>
<option <%if (request.getParameter("type")!=null) out.println("selected");%>value="teacher">老师</option>
</select>
</td>
</tr>
<%
String type;
if (request.getParameter("type")!=null){
    type=request.getParameter("type");
    if(type.equals("teacher"))
out.println("<tr><td width=193 height=18 bgcolor=#CCCC99><font size=2>教师名：</font></td><td width=714><input type=text name=teacherName></td><td width=65></tr>");
}
%>
<tr>
  <td height="83" bgcolor="#CCCC99" width="250"><font size=2>情况反映及意见</font></td>
  <td valign="top"><textarea name="caseText" cols="100" rows="5"></textarea></td>
  </tr>
<tr><td height="83" bgcolor="#CCCC99" width="250"><font size=2> 措施及建议：</font></td>
<td valign="top">
  <textarea name="ideaText" cols="100" rows="5"></textarea></td>
</tr>
<tr>
  <td height="23" colspan="2" valign="top"><CENTER>
      <input type="submit" value="提交">
  </CENTER></td>
  </tr>
</table>
</form>
</body>
</html> 用ajax吧，简单方便的多。推荐使用这个：
http://ajaxanywhere.sourceforge.net/index.html
不同的列表框写成不同的页面，然后……就是超cool的效果了！
看看这个效果：
http://ajaxanywhere.sweetdev-labs.org:8080/ajaxAnywhereDemo-1.0.1/locales3.jsp或者：
http://www.21class.com/kehu/form/HTMLPage1.htm
这里的无限级下拉框联动是最简单的。一个array，4行代码搞定！
它做好了一个封装的JS，你不用管他的具体实现，只要载入即可。
看看源文件吧，简单的不能再简单了。
目前我发现的，就这个最简单。
<%@ page contentType="text/html;charset=gb2312"%>
<%@ page import="java.sql.*"%>
<%@ page import="java.io.*"%>
<jsp:useBean id="user" class="com.conn_" scope="page"/>
<%
String las =request.getParameter("la");
String ars =request.getParameter("ar");
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
    function yjchang(){
   document.form2.la.value=document.form1.la.value;
       document.form2.submit();
   }
</script>
</head>
<body>
<form action="xx_add.jsp" method=post name="form2">
    <input type="hidden" name="la" id="la" value="<%=las%>">
<input type="hidden" name="ar" id="ar" value="<%=ars%>">
</form><form name="form1" method="post" action="xx_add_do.jsp">
  <br>
  <table width="80%"  border="0" align="center" cellpadding="1" cellspacing="1" class="table1">
<tr>
      <td width="16%" height="40" align="right">部门：</td>
      <td height="40">
          <select name="la" id="la" style="width:147" onChange="yjchang()">
<option></option>
<%
   String la1=request.getParameter("la");
String la="";
   ResultSet rs_la=null;
   try{
   rs_la=user.executeQuery("select branch_id,name from branch");
while(rs_la.next()){
la="";
if(rs_la.getString("branch_id").equals(la1)){
la="selected";
%>
            <option value="<%=rs_la.getString("branch_id")%>" <%=la%>><%=rs_la.getString("name")%></option>
            <%
}else{
   la="";
  %>
<option value="<%=rs_la.getString("branch_id")%>"><%=rs_la.getString("name")%></option>
<%}}
}catch( SQLException sqle ){}
catch( Exception e ){}
finally{
try{
user.getClose();
if (rs_la !=null){
rs_la.close();
rs_la=null;
}
}catch( SQLException sqle ){}
}
%>
          </select>
      </td>
      <td height="40" align="right">员工：</td>
      <td height="40">
<select name="ar" id="ar" style="width:147">
        <option></option>
        <%
if(las!=null){
String ar1=request.getParameter("ar");
String ar="";
ResultSet rs_area=null;
try{
rs_area=user.executeQuery("select ygid,name from hyj.area where branch_id='"+las+"'");
while(rs_area.next()){
ar="";
if(rs_area.getString("ygid").equals(ar1)){
ar="selected";
%>
        <option value="<%=rs_area.getString("ygid")%>" <%=ar%>><%=rs_area.getString("name")%></option>
        <%}else{%>
<option value="<%=rs_area.getString("ygid")%>"><%=rs_area.getString("name")%></option>
<%}}
}catch( SQLException sqle ){}
catch( Exception e ){}
finally{
try{
user.getClose();
if (rs_area !=null){
rs_area.close();
rs_area=null;
}
}catch( SQLException sqle ){}
}
%>
      </select>
  </td>
    </tr>
    <tr align="center">
      <td height="40" colspan="4">
  <input type="Submit" name="tj" value="提交" class="button">
 
      <input type="reset" name="Submit" value="重置" class="button">
</td>
    </tr>
  </table>
</form>
</body>
</html>

调试易

下拉框联动问题

解决方案 »