用JSP+JavaScript打造三级级联下拉菜单

最新推荐文章于 2021-02-16 05:31:37 发布

facepp

最新推荐文章于 2021-02-16 05:31:37 发布

阅读量1.4k

点赞数

分类专栏： javascript java 文章标签： javascript jsp exception string null sql

本文链接：https://blog.csdn.net/facepp/article/details/2399447

版权

java 同时被 2 个专栏收录

252 篇文章 0 订阅

订阅专栏

javascript

58 篇文章 0 订阅

订阅专栏

mssqlserver 数据库 db_Database02
CREATE TABLE [dbo].[tb_Area] (
[ID] [int] NOT NULL ,
[Name] [varchar] (50) COLLATE Chinese_PRC_CI_AS NOT NULL ,
[TypeID] [int] NOT NULL ,
[Father] [int] NULL
) ON [PRIMARY]
GO

源文件
com.core
ChStr.java
package com.core;
public class ChStr {
/***************************************************
*功能：解决输出中文乱码问题，返回值为String
***************************************************/
        public String chStr(String str){
           if(str==null){
                str="";
           }else{
                try{
str=(new String(str.getBytes("iso-8859-1"),"GB2312")).trim();
              }catch(Exception e){
                   e.printStackTrace(System.err);
              }
           }
           return str;
         }
/***************************************************
*功能：显示文本中的回车换行、空格，返回值为String
***************************************************/
       public String convertStr(String str1){
           if(str1==null){
            str1="";
          }else{
            try{

              str1=str1.replaceAll(" "," ");
              str1=str1.replaceAll("/r/n","<br>");
            }catch(Exception e){
                   e.printStackTrace(System.err);
            }
         }
         return str1;
     }
}

ConnDB.java
package com.core;

import java.sql.*;
public class ConnDB{
                Connection conn=null;
                Statement stmt=null;
                ResultSet rs=null;
        public ConnDB(){
                try{
                        Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver");
                }catch(java.lang.ClassNotFoundException e){
                        System.err.println(e.getMessage());
                }
        }
/***************************************************
        *method name: executeQuery()
        *功能:执行查询操作
        *return value: ResultSet
****************************************************/
        public ResultSet executeQuery(String sql){
                try{
                        conn=DriverManager.getConnection("jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=db_database02;user=sa;password=sa");
                        stmt=conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
                        rs=stmt.executeQuery(sql);
                }catch(SQLException ex){
                        System.err.println(ex.getMessage());
                        }finally{}
                return rs;
        }
/***************************************************
         *method name: executeUpdate()
         *功能:执行更新操作
         *return value: int
****************************************************/

        public int executeUpdate(String sql){
                int result=0;
                try{
                        conn=DriverManager.getConnection("jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=db_database02;user=sa;password=");
                        stmt=conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
                        result=stmt.executeUpdate(sql);
                }catch(SQLException ex){
                        result=0;
                        }finally{}
                return result;
        }
/***************************************************
        *method name: close()
        *功能:关闭数据库链接
        *return value: void
****************************************************/
       public void close(){
         try {
           if (rs != null) rs.close();
         }
         catch (Exception e) {
           e.printStackTrace(System.err);
         }finally{}
         try {
           if (stmt != null) stmt.close();
         }
         catch (Exception e) {
           e.printStackTrace(System.err);
         }finally{}
         try {
           if (conn != null) {
             conn.close();
           }
         }
         catch (Exception e) {
           e.printStackTrace(System.err);
         }finally{}
       }
}

index.jsp(级联的重点)
<%@page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage=""%>
<jsp:useBean id="connDB" class="com.core.ConnDB" scope="page"/>
<%
ResultSet rs_city = null;
ResultSet rs_Town = null;
ResultSet rs_province = null;
String sql = "";
String sql_T = "";
int SelectID_C = 0;
int SelectID_P=0;
String strCityID1=request.getParameter("CityID");
String strSelectID_P=request.getParameter("ProvinceID");
if (strSelectID_P!=null &&!strSelectID_P.equals("")) {
    session.setAttribute("SelectID_P", strSelectID_P);
}
String sql_P = "SELECT * FROM tb_Area WHERE TypeID=1 or TypeID=4 or TypeID=5";
try {
    rs_province = connDB.executeQuery(sql_P);
    if (rs_province.next()) {
      if(session.getAttribute("SelectID_P")!=null){
        SelectID_P= Integer.parseInt((String)session.getAttribute("SelectID_P"));
      }else{
        SelectID_P=rs_province.getInt("ID");
      }
      %>
      <html>
      <head>
      <title>级联菜单</title>
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <link href="style.css" _fcksavedurl=""style.css"" _fcksavedurl=""style.css"" rel="stylesheet">
        <style type="text/css">
        
        </style>
      </head>
      <script language="javascript">
      function ChangeItem_P(){
        var ProvinceID=form1.Province.value;
        window.location.href="index.jsp?ProvinceID="+ProvinceID;           //缺点:取父结点的值时要转发页面.
      }
      </script>
      <script language="javascript">
      function ChangeItem_C(){
        var CityID=form1.city.value;
        window.location.href="index.jsp?CityID="+CityID;
      }
      </script>
      <body>
      <table width="400" height="242" border="0" cellpadding="-2" cellspacing="-2" background="Images/add.gif">
        <tr>
          <td valign="top">
            <table width="400" height="271" cellpadding="-2" cellspacing="-2">
              <tr>
                <td width="11" height="85"> </td>
                <td width="373"> </td>
                <td width="14">
                  <span class="style2"></span>
                </td>
              </tr>
              <tr>
                <td height="144"> </td>
                <td valign="top">
                  <div align="center">
                    <form name="form1" method="post" action="">
                    <table width="88%" height="142" border="1" cellpadding="-2" cellspacing="-2" bordercolor="#669999" bordercolordark="#FFFFFF">
                      <tr>
                        <td width="32%" height="27" bgcolor="#809EA4">
                          <div align="center" class="style1">省级名称：</div>
                        </td>
                        <td width="68%">
                        <%
                        sql = "select* from tb_area where TypeID=2 and father=" + SelectID_P + "";
                        sql_T = "select* from tb_area where TypeID=3 and father=" + SelectID_P + "";
                        rs_city = connDB.executeQuery(sql);
                        rs_Town = connDB.executeQuery(sql_T);
                        %>
                        <div align="left">                       
                          <select name="Province" onChange="ChangeItem_P()">
                          <%
                          rs_province.first();
                          do {
                            %>
                            <option value="<%=rs_province.getInt("ID")%>" <%if(rs_province.getInt("ID")==SelectID_P){out.print("selected");} %>><%=rs_province.getString("Name")%> </option>
                            <%
                            } while (rs_province.next()) ;
                            %>
                            </select>
                        </div>
                        </td>
                      </tr>
                      <tr>
                        <td height="27" bgcolor="#809EA4">
                          <div align="center" class="style1">市/县名称：</div>
                        </td>
                        <td>
                          <div align="left">                       
                            <%if (rs_city.next()) {
                            if (strCityID1==null) {
                              SelectID_C=rs_city.getInt("ID");
                            }else{
                              SelectID_C = Integer.parseInt(request.getParameter("CityID"));
                            }
                            %>
                            <select name="city" onChange="ChangeItem_C()">
                            <%rs_city.first();
                            do {
                              %>
                              <option value="<%=rs_city.getInt("ID")%>" <%if(rs_city.getInt("ID")==SelectID_C){%>selected<%}%>><%=rs_city.getString("Name")%>                        </option>
                              <%
                              } while (rs_city.next());
                              %>
                              </select>
                          </div>
                          <%} else {                    %>
                          <select name="city" onChange="ChangeItem_C()">
                            <option value="0">---</option>
                          </select>
</div>
<%
}
%>
</td>
                      </tr>
                      <tr>
                        <td height="27" bgcolor="#809EA4">
                          <div align="center" class="style1">区/镇/乡名称：</div>
                        </td>
                        <td>
                        <%
                        if (SelectID_C != 0) { //选择了市县级名称
                        sql_T = "select* from tb_area where father=" + SelectID_C + "";
                        System.out.println("sql_T!=0:"+sql_T);
                        rs_Town = connDB.executeQuery(sql_T);
                      }
                      %>
                      <%if (rs_Town.next()) {%>
                      <div align="left">                       
                        <select name="town" id="select5">
                        <%rs_Town.first();
                        do { %>
                        <option value="<%=rs_Town.getInt("ID")%>"><%=rs_Town.getString("Name")%></option>
                        <%
                        } while (rs_Town.next());
                        %>
                        </select>
                      </div>
                      <%} else {                  %>
                      <div align="left">  
                        <select name="town" id="select5">
                          <option value="0">---</option>
                        </select>
                      </div>
                      <%} %>
                        </td>
                      </tr>
                      <tr>
                        <td height="33" colspan="2">
                          <div align="center">
                            <input name="Submit" type="submit" class="Style_button" value="删除">
                            <input name="Button" type="button" class="Style_button" value="关闭" onClick="javascrip:window.close()">
                          </div>
                        </td>
                      </tr>
                    </table>
                    </form>
</div>
                </td>
                <td> </td>
              </tr>
              <tr>
                <td> </td>
                <td>          </td>
                <td> </td>
              </tr>
            </table>
</td>
        </tr>
      </table>
      </body>
      </html>
      <%
      }
} catch (Exception e) {
    System.out.println("查询省级名称时出错："+e.getMessage());
}
%>

style.css