首頁 > 開發者 > JSP

Jsp+javascript打造二級級聯下拉式功能表

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
javascript|js|菜單|下拉

資料庫需求分析：
class(一級欄目資訊）：classId(自動編號），className（欄目名稱）
Nclass（二級欄目資訊）：NclassId（自動編號），NclassName(欄目名稱），parentId（一級欄目id，與class表中的classId關聯）

<%@ page contentType="text/html; charset=GB2312" language="java" errorPage="../error.jsp" %>
<%@ include file="../conn.jsp"%>
<%@ include file="../ds.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<%request.setCharacterEncoding("gb2312"); %>
<HTML><HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">

<TITLE>串聯功能表</TITLE>
<LINK rel="stylesheet" type="text/css" href="style.css">
</HEAD>
<!--從資料庫中得到二級欄目資訊-->
<%String sql="select * from Nclass order by NclassId asc";
ResultSet rs=stmt.executeQuery(sql);
%>
<!--將二級欄目資訊儲存到數組subcat中-->
<script type="text/javascript">
var onecount;
onecount=0;
subcat = new Array();
        <%
        int count = 0;
        while(rs.next()){
        %>
subcat[<%=count%>] = new Array("<%=rs.getString("NclassName")%>","<%=rs.getString("NclassId")%>","<%=rs.getString("parentId")%>");
        <%
        count++;
        }
        rs.close();
        %>
onecount=<%=count%>;
<!--決定select顯示的函數-->
function changelocation(locationid)
    {
    document.myform.NclassId.length = 0;

    var locationid=locationid;
    var i;
    for (i=0;i < onecount; i++)
        {
            if (subcat[i][2] == locationid)
            {
                document.myform.NclassId.options[document.myform.NclassId.length] = new Option(subcat[i][0], subcat[i][1]);
            }       
        }
       
    }   
</script>

<FORM method="POST" name="myform" action="adminsave.jsp?action=add">
  <TABLE>
  
    <TR>
      <TD>一級分類</TD>
      <TD> 
        <SELECT name="classId" size="1">
          <OPTION selected value>==請選一級分類==</OPTION>
        <sql:query var="query" dataSource="${bookdev}">
          SELECT * FROM class
       </sql:query>
<c:forEach var="row" items="${query.rows}">
 <option value="${row.classId}">${row.className}</option>
</c:forEach>
</select>
      </TD>
      <TD>選擇二級分類</TD>
      <TD>
        <SELECT name="NclassId">
          <OPTION selected value>==請選二級分類==</OPTION>
        </SELECT>
      </TD>
    </TR>
</TABLE>
 
</FORM>
</BODY>
</HTML>



本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
jsp book jsp 6161 jsp editor jsp quiz jsp language jsp tie free jsp hosting
相關文章
動態網頁製作技術JSP頁面顯示亂碼問題的解決
servlet、jsp跳轉(傳值)總結及URL傳參數__js
Spring Boot 最佳實務（二）整合Jsp與生產環境部署
JSP頁面列印
用JSP實現資料庫圖片的儲存與顯示執行個體
用jsp上傳圖片檔案，存貯到欄位類型為blob的流形式代碼

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More