如何动态实现二级联动菜单，急！

Question

在网页中，如何实现如下效果:
现有一个下拉菜单和一个文本框，现从数据库中读取数据，将其中的一项显示在下拉菜单中，然后当下拉菜单的内容改变时，文本框的内容（也是数据库中的信息)也随着变化。
用jsp或javascript如何实现呀。高手指教，急用！！！！

Answer 1

<script language="javascript">
var subcat = new Array(1000);
<%
int n=0;
String sSql2="";
String sBelongOrg2="",sUserName2="",sUserID2="";
sSql2="select UserID,UserName,BelongOrg from USER_INFO order by UserID";
ASResultSet rs = Sqlca.getASResultSet(sSql2);
while (rs.next())
{
sBelongOrg2=rs.getString("BelongOrg");
sUserName2=rs.getString("UserName");
sUserID2=rs.getString("UserID");
%>
subcat[<%=n%>]=new Array("<%=sBelongOrg2%>","<%=sUserName2%>","<%=sUserID2%>");
<%
n++;
}
rs.getStatement().close();
%>
</script>function ch(selectedids,n)
{  
   var selectedvalue=selectedids;
   var i=0;
   var t=0;
   document.item.UserID.length=0;
   for(i=0;i<n;i++)
   {
      if(subcat[i][0]==selectedvalue)
      {
         document.item.UserID.options[t]=new Option(subcat[i][1],subcat[i][2]);
         t=t+1;
      }
   }
}

Answer 2

思路是一开始就全取出来了,数组保存信息
当选择了第1级的时候,开始比较,相等的话就把这个放入第2级中function ch(selectedids,n)我当初也是baidu出来的,多尝试就可以了

Answer 3

var xhr=new ActiveXObject("microsoft.xmlhttp");
function showText(){
var menu=document.getElementById("menu");
var txt=document.getElementById("txt");
xhr.open("get","/servlet/gettxt?key="+menu.options[menu.selectedIndex].value,true);
xhr.onreadystatechange=function()
{
    txt.value=xhr.responseText;
}
xhr.send(null);
}import javax.servlet.http.*;
......
public void doGet(HttpServletRequest request,HttpServletResponse) throws ServletException,IOException
{
    request.setCharacterEncoding("GBK");
    response.setContentType("text/html;charset=GBK");
    PrintWriter out=response.getWriter();
    String key=request.getParameter("key");
    String txt="";
    if(key!=null && !key.equals(""))
    {
        txt=KeyToMenu.getText(key);
    }
    out.println(txt);
    out.flush();
    out.close();
}
...

Answer 4

javascript里写数据库操作。厉害

Answer 5

//=================公司类方法===================//
public String getDrop(String compid,String dataid) throws Exception{
      if(str.IsEmpty(dataid) )
        dataid="AAA";
      Compid  com[]=this.readAll(compid,dataid);
      StringBuffer bf = new StringBuffer();
      if(com.length > 0){
           for(int i=0;i<com.length ;i++){
             if(dataid.equals(com[i].getBh()) )
               bf.append("<option value=" + com[i].getID()  + " selected >" + com[i].getName() + "</option>") ;
             else
               bf.append("<option value=" + com[i].getID()  + ">" + com[i].getName() + "</option>") ;
           }
         }
    return bf.toString();
    }
 //=================部门类方法同上===================////====================页面调用=====================//   Compid com = new Compid();
   Deptid dep = new Deptid();
   Deptid [] depAll=bm.readAll("","");          <select name="deptid" style="width:120px">
           <option value="">所有公司
            <%=com.getDrop(compid,deptid)%>
          </select>          <select name="deptid" style="width:120px">
           <option value="">所有部门
            <%=dep.getDrop(compid,deptid)%>
          </select>
<script language=javascript>
 var bm= new Array();
 <%if(depAll.length>0){
     for(int i=0;i<depAll.length;i++){%>
     bm[<%=i%>] = new Array("<%=depAll[i].getCom()%>","<%=depAll[i].getID()%>","<%=depAll[i].getName()%>");
  <%}}%>
 function setBm(){
  document.form_com_dep.deptid.length = 0; 
  document.form_com_dep.deptid.options[document.form_com_dep.deptid.length] = new Option("所有部门","");
  var comp = document.form_com_dep.compid.value ;
  var i=0;
  for (i=0;i < <%=depAll.length%> ; i++)  {
      if (bm[i][0] == comp ) {
         document.form_com_dep.deptid.options[document.form_com_dep.deptid.length] = new Option(bm[i][2], bm[i][1]);
             }        
     }
 }
</script>