如何动态改变下拉框的内容？

try something like<html>
<head>
<script language="javascript">
var list1 = [1,100];
var list2 = new Array(2);
list2[0] = [1,2,3,4,5,6,7,8,9,10];
list2[1] = [101,102,103,104,105,106,107,108,109,110];function addtoList()
{
  for (var i=0; i < list1.length; i++)
  {
var opt = new Option(list1[i],list1[i]);
document.form1.sel1.options[i] = opt;
  }
}function changeOptions()
{
   var n = document.form1.sel1.selectedIndex;
   document.form1.sel2.options.length = 0;   for (var i=0; i < list2[n].length; i++)
   {
var opt = new Option(list2[n][i],list2[n][i]);
document.form1.sel2.options[i] = opt;
   }
}
</script>
</head>
<body onload="addtoList();changeOptions()">
<form name="form1">
list 1: 
<select name="sel1" onchange="changeOptions()">
</select>
<br>
list 2:
<select name="sel2">
</select>
</form>
</body>
</html>

解决方案 »

  1.   

    用javascript
    http://www.jspserver.com:8080/cgi-bin/jspbbs/forums.cgi?forum=8http://bbs.jspserver.com
      

  2.   

    我也碰到过类似的情况，我的A和B的内容是从数据库里面读出来的，B的内容由A决定，就是说，选择A，B出现相应的内容。我找了好久，都没有这样的代码，后来我自己用了一种方法来做，虽然代码可读性差了一点，但我还是实现了这样的功能，不过我的A不是下拉框，而是单选框（如果一定要是下拉框，你可以自己改变HTML代码），代码清单如下：<%@ page contentType="text/html;charset=gb2312"%> 
    //数据库连接
    <%@ include file="../config/sqlconnect.jsp" %>
    <% String sql,name,title,status,congshu,selectClass,id,info; %>
    <% info="<b>请选择文章类别：</b>";%><html><head><title>ClassAndMessage.jsp</title>
    <link rel="stylesheet" href="../css/ton" type="text/css">
    </head><SCRIPT>
    function goArea(a)
    {
    window.location="此页面.jsp?area="+a;
    }
    </SCRIPT>
    <body leftmargin="0" topmargin="0">
    <table width="75%" border="0" align="center" class="ton" cellspacing="2" cellpadding="2">
      <tr> 
        <td valign="top">  
          <form action=ClassAndMessage.jsp  target="mainFrame" method="post">
           
    <%
    String area=request.getParameter("area");
    if(area==null)
    {
    out.print(info);
    }
    %> <table width="100%" border="1" cellspacing="0" cellpadding="0" bgcolor="#EEEEEE" bordercolor="#FFFFFF" class="ton">
    <tr> <%
    //申明变量
    sql = "select * from class where status=1";
    sqlRst = sqlStmt.executeQuery(sql);
    int i=0;
    //读取数据库class中身份为1级（就是A）的数据，并且以radio的html方式显示
    while(sqlRst.next())
    {
    name = (String)sqlRst.getString("name");
    id = (String)sqlRst.getString("id");
    i++;
    out.print("<td>");
    out.print("<input type='radio' name=area onClick=");
    out.print("'goArea(");
    out.print(id);
    out.print(");'>");
    out.print(name);
    out.print("</td>");
     }
    sqlRst.close();
    %>
    </tr><tr> 
    <%if(!(area==null))
    {
      //读取class所有数据
      sql = "select * from class where status=1 ";
      sqlRst = sqlStmt.executeQuery(sql);
       while(sqlRst.next())
      {
        id = (String)sqlRst.getString("id");
        i++;
     
        //判断AREA是否包含ID,如果有，则将所有从属于本id的name读取出来，否则用<td></td>代替
        if(area.equals(id))
        {
        sql = "select * from class where congshu='"+id+"'";
        sqlRst = sqlStmt.executeQuery(sql);
        out.print("<td><select name=selectClass>");
        while(sqlRst.next())
          {
          id = (String)sqlRst.getString("id");
          name = (String)sqlRst.getString("name");
          i++;
          out.print("<option value='");
          out.print(id);
          out.print("'>");
          out.print(name);
          out.print("</OPTION>");
          }
        out.print("</select><input type='submit' name='Submit' value='Go'><td>");
         }
         else
        {
        //如果TD没有ID纪录，表示并未有选择此ID，则用以下<TD></TD>代替
    %>
    <td>&nbsp; </td>
    <%
        }
      }
    }
    %>
    </tr>
    </table>  
            
          </form> 
        </td>
      </tr>
    </table>
    </body>
    </html>
      

  3.   

    页面起初判断用户是否选择了area，如果没有，就输出info，让他选择类别A，如果有，则根据A显示B。