怎么动态实现二级联动菜单，

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

[解决办法]
<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;
}
}
}

[解决办法]

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();
}
...
[解决办法]
//=================公司类方法===================//
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>