如何实现两个下拉菜单之间的选择？

<html>
<head>
<Title>
</Title>
<link rel="stylesheet" href="/css/main.css" type="text/css">
<SCRIPT language="JavaScript" SRC="/javascript/common.js"></SCRIPT>
<script language = "JavaScript">
var onecount;
onecount=0;
subcat = new Array();
        <%
String sql="SELECT a.HeadshipName AS Posname, b.DepartmentId AS Nodeid, b.HeadshipId AS Posid FROM T_HEADSHIP a INNER JOIN  T_DEPARTHEAD b ON a.Universalid = b.HeadshipId";
java.sql.PreparedStatement pstmt2=con.prepareStatement(sql);
java.sql.ResultSet rs2=pstmt2.executeQuery();
   int   count = 0;
        while(rs2.next()) 
{
        %>
subcat[<%=count%>] = new Array("<%=rs2.getString("Posname").trim()%>","<%=rs2.getString("Nodeid").trim()%>","<%=rs2.getString("Posid").trim()%>");
        <%
        count = count + 1;
}
    
        %>
onecount=<%=count%>;function changelocation(locationid)
    {
    document.theForm.smalllocation.length = 0; 
    var locationid=locationid;
    var i;
   document.theForm.smalllocation.options[0] = new Option("<%=departHead.getHeadshipName()%>","<%=personItem.getPrincipalship()%>");
    for (i=0;i < onecount; i++)
        {
            if (subcat[i][1] == locationid)
            { 
                document.theForm.smalllocation.options[document.theForm.smalllocation.length] = new Option(subcat[i][0], subcat[i][2]);
            }        
        }
        
    }    
</script>
</head>
<Body>
<FORM method='POST' name='theForm' action="/servlet/oa.user.SubmitEditUserServlet">
<<Table >
<tr>
  <td   class="caption"  ><FONT COLOR="red">*</FONT>部门：</td>
  <td   class="detail">   
  <select name="Department" size="1" id="Department"  onChange="changelocation(document.theForm.Department.options[document.theForm.Department.selectedIndex].value)" >
<option value="<%=departmentItem.getNode_id()%>" selected><%=departmentItem.getDepartment_name()%></option>
             <%

 String query="select * from T_Department" ;
 pstmt=con.prepareStatement(query);
 rs=pstmt.executeQuery();
 while(rs.next())
 {
%>
 <option value="<%=rs.getInt("Node_id")%>"><%=rs.getString("DepartMent_Name")%></option>
<%
 }
%>
  </select>
</td></tr><tr><td   class="caption"  ><FONT COLOR="red">*</FONT>职    务：</td>
  <td   class="detail">  
  <select name="smalllocation" size="1">
  <option value="<%=personItem.getDepartment()%>" selected><%=departHead.getHeadshipName()%></option>
</select>
  </td></tr>
   <script LANGUAGE="JavaScript">
                     changelocation(document.theForm.Department.options[document.theForm.Department.selectedIndex].value); //将一级分类的value传给changelocation()函数,生成二级分类的列表
            </script>
<!--<tr><td   class="caption"  ><FONT COLOR="red">*</FONT>部门：</td><td   class="detail"><input name='Department' type='text' 
size='50' maxlength='50'   value="<%=toHtml(personItem.getDepartment())%>"></td></tr><tr><td   class="caption"  ><FONT COLOR="red">*</FONT>职务：</td><td   class="detail"><input name='T_personPrincipalship' type='text' 
size='50' maxlength='50'   value="<%=toHtml(personItem.getPrincipalship())%>"></td></tr>
-->
</TABLE>
<!--input type="submit" value="submit"-->
<%= getButton(request,response)%>
</FORM>
</BODY>
</HTML>
这个是我最近项目中用到的一个及联选择框的代码。
已经可以实现及联。不过其中有些代码是从库中取出了数据。
现在发给你。仔细看看应该你应该可以转化为自己的。

解决方案 »

  1.   

    定义表单的onchange事件。很简单，多照这个思路多想想就出来了。
      

  2.   

    谢谢，我不太明白的是，两个结果集是如何交互的呢？
    因为第二个列表框中的option是根据第一个列表框的值显示的阿，
    谁能说说原理？谢谢
      

  3.   

    <table width="768" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td><TR  class='trNb_bgqt'   name='tr2' id='tr2' rowNo="0" rowNoFlag="2" formName="other" trType="TITLE" style="height:28;">
            
            <TD rowNo="0" menuFlag=td_td771  colNo='1' id='td771' tdChsName='td771' colSpan='1' rowSpan='1' align='right' vAlign='center' style=" font-family:宋体;font-size:12px;">
              请选择查询条件 
            </TD>
            <TD rowNo="0" menuFlag=td_td772  colNo='2' id='td772' tdChsName='td772' colSpan='1' rowSpan='1' align='left' vAlign='center' style=" font-family:宋体;font-size:12px;">
              <%  
                 _select29_73282 = select29[0];
              %>  
              <select  name='select29' id='select29' chsname='select29' style='width:100%;'  onChange="select29_onChange(this)" rightcontrolmode=1  iscopydata = 0  writable = "no" >
                <option value='nf' <%=_select29_73282.equals("nf")?"selected":""%> >按年份 </option>
                <option value='lb' <%=_select29_73282.equals("lb")?"selected":""%> >按类别 </option>
                <option value='yzz' <%=_select29_73282.equals("yzz")?"selected":""%> >按原作者 </option>
                <option value='dyyz' <%=_select29_73282.equals("dyyz")?"selected":""%> >按第一译者 </option>
                <option value='dysgr' <%=_select29_73282.equals("dysgr")?"selected":""%> >按第一审稿人 </option>
              </select>
    </TD>
            <TD rowNo="0" menuFlag=td_td773  colNo='3' id='td773' tdChsName='td773' colSpan='1' rowSpan='1' align='left' vAlign='center' style=" font-family:宋体;font-size:12px;">
              <%  
                 _select30_73283 = select30[0];
              %>  
              <Select  name='select30' id='select30' chsName='select30' style='width:100%;'  onchange="select30_onChange(this)" rightControlMode=1  isCopyData = 0  writable = "no" >                  <option value=''>全部</option>           
               <% 
               if (1==1){ 
                String sqlOption="SELECT  distinct   "+select29[0]+"   nf FROM   xf_kjqb_sygc  order by nf desc";
                   webdeveloper.dataset.SResultSetEx rsOption = new webdeveloper.dataset.SResultSetEx();
                   String   sText ="";                                                                     
                   if( rsOption.executeQuery(sqlOption)){                                            
                     for (int m=0;m< rsOption.getRow();m++){                                                  
                        sText ="";                                                                     
                        for (int n=1;n< rsOption.getFieldNum();n++){                                                  
                           sText  += rsOption.getFieldValue(m,n)+"|";                          
                        }
                        if( rsOption.getFieldNum() > 1){      
                            sText = sText.substring(0,sText.length()-1);                      
                        }     
                        if( rsOption.getFieldNum() ==1){
                            sText = rsOption.getFieldValue(m,0); //text value                                
                        }
                %>
                      <option value='<%=rsOption.getFieldValue(m,0)%>' <%=_select30_73283.equals(rsOption.getFieldValue(m,0))?"selected":""%>><%=sText %></option>           
               <%                                                                                      
                     }                                                                                 
                   }                                                                                   
                } 
               %>                                                                                      
              </Select>
            </TD>
            <TD rowNo="0" menuFlag=td_td776  colNo='5' id='td776' tdChsName='td776' colSpan='1' rowSpan='1' align='left' vAlign='center' style=" font-family:宋体;font-size:12px;">
              <Input type=button name='btnFind' id='btnFind' rightControlMode=1  isCopyData = 0  chsName='查询' class='ButtonEdit'   value='查询'   onclick="dataFind('','','')">
            </TD>
            
          </TR>&nbsp;
              
            </table>