下拉框联动问题(急)

Question

一、问题简要描述：
   在JSP页面里,要把第一个部门下拉框选中的值赋给第二个人员下拉框,使的第二个下拉框只显示改部门人员,用javascript怎么写?
二、代码：
第一个下拉框:
<select name="DEP" class="inputAll">
  <option value=""></option>
  <%
  String sConnStr="system.";
  Hashtable hash=new Hashtable();
  gzp.rygl.rygl zx=new gzp.rygl.rygl();
  hash=zx.get_bm(sConnStr);
  for(Iterator it=hash.entrySet().iterator();it.hasNext();){
       Map.Entry e = (Map.Entry) it.next();
       String strKey=e.getKey().toString().trim();///DEP_ID
       String strValue =(String)e.getValue();//DEP_NAME
%>
      <option value=<%=strKey%>><%=strValue%></option>
<%   
  }
%>
</select>
第二个下拉框:
<select name="USER" class="inputAll">
  <option value=""></option>
<%
   hash=zx.get_ry(sConnStr,DEP_ID);
   for(Iterator it=hash.entrySet().iterator();it.hasNext();){
       Map.Entry e2 = (Map.Entry) it.next();
       String strKey2=e2.getKey().toString().trim();///USER_ID
       String strValue2=(String)e2.getValue();//USER_NAME
%>
<option value=<%=strValue2%>><%=strValue2%></option>
<%
}
%>
</select>
三、说明：当第一个下拉框的值改变时，把strKey值传给第二个下拉框
   hash=zx.get_ry(sConnStr,DEP_ID);里的DEP_ID参数。
   请问JAVASCRIPT怎么写？

Answer 1

<script>
function Muti_List(eOutput, oGames)
{
Expand(eOutput, oGames, eOutput);
}function RemoveChild(eElement)
{
while(eElement = eElement.eChild)
{
eElement.removeNode(true);
}
}function Expand(eParent, oObject, eOutput)
{
var eSelect = document.createElement("SELECT");
eParent.insertAdjacentElement("afterEnd",eSelect);
eParent.eChild = eSelect;
eSelect.oData = oObject;var eOption;
eOption = document.createElement("OPTION");
eSelect.options.add(eOption);var key;
for(key in oObject)
{
eOption = document.createElement("OPTION");
eSelect.options.add(eOption);
eOption.innerText = key;
eOption.oData = oObject[key];
}
eSelect.onchange = function ()
{
RemoveChild(eSelect);
var eSelectedOption = eSelect.options[eSelect.selectedIndex];
var oData = eSelectedOption.oData;
if(oData)
{
if(typeof(oData) == "string")
{
eOutput.value = oData;
}
else
{
eOutput.value = "请选择下拉列表";
Expand(eSelect, oData, eOutput);
}
}
else
{
eOutput.value = "请选择下拉列表";
}}
}
</script><script>
var oServerData = new Object;
oServerData["大话II"] = new Object;
oServerData["大话II"]["推荐"] = new Object;
oServerData["大话II"]["推荐"]["粤韵飘香"] = "大话II.粤韵飘香";
oServerData["大话II"]["天界"] = new Object;
oServerData["大话II"]["天界"]["云中殿"] = "大话II.云中殿";
oServerData["大话II"]["天界"]["御花园"] = "大话II.御花园";
oServerData["大话II"]["天界"]["帝尧宫"] = "大话II.帝尧宫";
oServerData["大话II"]["天界"]["吉祥天"] = "大话II.吉祥天";
oServerData["大话II"]["地界"] = new Object;
oServerData["大话II"]["地界"]["车迟国"] = "大话II.车迟国";
oServerData["大话II"]["地界"]["流沙河"] = "大话II.流沙河";
oServerData["大话II"]["地界"]["朱紫国"] = "大话II.朱紫国";
oServerData["大话II"]["地界"]["钦法国"] = "大话II.钦法国";
oServerData["大话II"]["地界"]["月陀国"] = "大话II.月陀国";
oServerData["大话II"]["地界"]["高老庄"] = "大话II.高老庄";
oServerData["大话II"]["人界"] = new Object;
oServerData["大话II"]["人界"]["陷空山"] = "大话II.陷空山";
oServerData["大话II"]["人界"]["火云洞"] = "大话II.火云洞";
oServerData["大话II"]["人界"]["莲花山"] = "大话II.莲花山";
oServerData["大话II"]["修罗"] = new Object;
oServerData["大话II"]["修罗"]["华山论剑"] = "大话II.华山论剑";
oServerData["大话II"]["修罗"]["情系今生"] = "大话II.情系今生";
oServerData["大话II"]["修罗"]["彩云之南"] = "大话II.彩云之南";
oServerData["大话II"]["修罗"]["至尊宝"] = "大话II.至尊宝";oServerData["梦幻"] = new Object;
oServerData["梦幻"]["湖南区"] = new Object;
oServerData["梦幻"]["湖南区"]["岳阳楼"] = "梦幻.岳阳楼";
oServerData["梦幻"]["湖南区"]["橘子洲"] = "梦幻.橘子洲";
oServerData["梦幻"]["湖南区"]["浏阳河"] = "梦幻.浏阳河";
oServerData["梦幻"]["湖南区"]["洞庭湖"] = "梦幻.洞庭湖";
oServerData["梦幻"]["追忆"] = new Object;
oServerData["梦幻"]["追忆"]["梦回奔日"] = "梦幻.梦回奔日";
oServerData["梦幻"]["追忆"]["梦回望月"] = "梦幻.梦回望月";
oServerData["梦幻"]["追忆"]["再续前缘"] = "梦幻.再续前缘";
oServerData["梦幻"]["追忆"]["青山绿水"] = "梦幻.青山绿水";
oServerData["梦幻"]["推荐区"] = new Object;
oServerData["梦幻"]["推荐区"]["碧海银沙"] = "梦幻.碧海银沙";
oServerData["梦幻"]["推荐区"]["富乐山"] = "梦幻.富乐山";
oServerData["梦幻"]["推荐区"]["华顶山庄"] = "梦幻.华顶山庄";
oServerData["梦幻"]["推荐区"]["群英荟萃"] = "梦幻.群英荟萃";</script>
<input type="text" name="GroupName" readonly value="请选择下拉列表">
<script language="jscript">
Muti_List(document.all.GroupName,oServerData);
</script>

Answer 2

这里有很多例子
http://www.mattkruse.com/javascript/dynamicoptionlist/

Answer 3

用providers.jar把,专门做联动下拉框的开源项目,具体叫什么忘了
只记得包名
我试了,很好用

Answer 4

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<html>
<head>
<title>2级菜单联动事例</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=gb2312">
 
<script language = "JavaScript">
var onecount;
onecount=0;
subcat = new Array();
 <%
  Class.forName("com.sybase.jdbc2.jdbc.SybDriver"); 
Connection con = DriverManager.getConnection("jdbc:sybase:Tds:197.111.1.1:5000/xddds", "sa", ""); 
//Connection conn= DriverManager.getConnection(url, "sa",""); 
Statement stmt=con.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE); 
  int count = 0;
ResultSet rs = stmt.executeQuery("select * from taxempcode order by taxempcode");//读取数据
while(rs.next())
{
String taxempname=rs.getString("taxempname");//转换字符类型
%>
<!--三维数组-->
subcat[<%=count%>] = new Array("<%=taxempname%>","<%=rs.getString("taxorgcode")%>","<%=rs.getString("taxempcode")%>");//产生数组
<%
        count = count + 1;
}
%>
onecount=<%=count%>;
 
function changelocation(id)
{
//alert(id)
    document.form1.taxempselect.length = 0; 
 
    var id=id;
    var i;
    document.form1.taxempselect.options[0] = new Option('选择税务人员','');
    for (i=0;i < onecount; i++)
        {
            if (subcat[i][1] == id)
            { 
                document.form1.taxempselect.options[document.form1.taxempselect.length] = new Option(subcat[i][0], subcat[i][2]);
            }        
        }
        
}       
</script>
</head>
<body bgcolor="#FFFFFF">
 
<form name="form1" method="post" action="">
<table width="500"  border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td width="180" height="20" align="right">选择税务机关:</td>
    <td width="320">

  <!--onchange事件的值可以写为：document.form1.taxorgselect.value-->
  
  <select name="taxorgselect"  style="width:250px" onChange="changelocation(document.form1.taxorgselect.options[document.form1.taxorgselect.selectedIndex].value)" size="1">
    <option value="2">请选择税务机关</option>
<%
rs = stmt.executeQuery("select * from taxorgcode order by taxorgcode");
while(rs.next())
{
 String Bname = rs.getString("taxorgname");
 //System.out.println(Bname);
%>
   <option value="<%=rs.getString("taxorgcode")%>"><%=Bname%></option>
<%
}
rs.close(); 
stmt.close(); 
con.close(); %>
     </select><br>
    </td>
  </tr>
  <br>
  <tr>
    <td height="20" align="right">选择税务人员:</td>
    <td>
  <select name="taxempselect" style="width:250px">
    <option value="" selected>请选择税务人员</option>
 
     </select> 
 
 </td>
  </tr>
  <tr>
    <td height="20" colspan="2" align="center"><input type="submit" name="Submit" value="提交"></td>
  </tr>
<script LANGUAGE="JavaScript">
    //changelocation(document.form1.bigsortselect.options[document.form1.bigsortselect.selectedIndex].value); //将一级分类的value传给changelocation()函数,生成二级分类的列表
</script>
</table>
</form>
 
</body>
</html>

Answer 5

用onChang事件实现form的submit(),取得第一个下拉菜单的值,就可以根据这个值来控制第二个菜单的内容了啊.