在一個jsp頁面實現二級下拉框聯動

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

js|下拉|頁面

　　在一個jsp頁面實現二級下拉框聯動，即時讀取資料庫資料。

在一個jsp頁面實現二級下拉框聯動，即時讀取資料庫資料，這個方法非常使用，只需要修改很小的地方就可以使用。設計的檔案，serch.jsp，main.js，bytetostr.js，

先講一下main.js，這是javascript，其中注意修改jsp頁面名稱。

function findObject(fName,initValue)...{
   var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   xmlhttp.open("POST","searchmx.jsp?findObject="+fName+"&initValue="+initValue,false);//注意修改jsp頁面
   xmlhttp.send();
   document.getElementById(fName).innerHTML=bytes2BSTR(xmlhttp.responsebody); //bytes2BSTR函數在bytetostr.js中
}

其次為bytetostr.js，這是vbscript，這個不需要修改任何內容，他的主要功能就是讀取資料轉換字串用的。

Function bytes2BSTR(vIn)
dim i
strReturn = ""
For i = 1 To LenB(vIn)
ThisCharCode = AscB(MidB(vIn,i,1))
If ThisCharCode < &H80 Then
strReturn = strReturn & Chr(ThisCharCode)
Else
NextCharCode = AscB(MidB(vIn,i+1,1))
strReturn = strReturn & Chr(CLng(ThisCharCode) * &H100 + CInt(NextCharCode))
i = i + 1
End If
Next
bytes2BSTR = strReturn
End Function

接下來就是serch.jsp頁面，只需要修改div中的id為你想要的名字，再將一開始的包更換一下，已經sql語句改下就可以了，有不明白的可以參與討論

<%@ page contentType="text/html; charset=gb2312" language="java" import="com.sjth.zdsygl.vo.*,com.sjth.zdsygl.biz.*,java.util.*,com.sjth.zdsygl.jdbc.*,java.sql.ResultSet"%>//匯入相應的包
<%
//這部分代碼用於執行查詢資料庫，返回字串
if (request.getParameter("findObject")!=null)...{
    if (request.getParameter("findObject").equals("hy_dm"))...{
      DBConnect conn = null;
      ResultSet rs = null;
      try...{
        out.print("<select name='hy_dm' >");
        String sql = "select * from dm_hy group by left(hy_dm,7)";
        conn = new DBConnect();
        conn.setPstmt(sql);
        rs = conn.executeQuery(sql);
        while(rs.next())...{
          out.print("<option value='"+rs.getString("hy_dm")+"'>"+rs.getString("hy_mc")+"</option>");
        }
        out.print("</select>");
     }
     catch (Exception e)...{
     }
     finally...{
          try...{
            if (rs != null)
                rs.close();
            if (conn != null)
                conn.close();
          }
          catch (Exception e)...{
            e.printStackTrace();
          }
     }
   }
    if (request.getParameter("findObject").equals("hymx_dm"))...{
      DBConnect conn = null;
      ResultSet rs = null;
      try...{
        out.print("<select name='hymx_dm' >");
        String sql = null;
        if (request.getParameter("initValue").equals(""))...{
          sql = "select * from dm_hy";
        }
        else...{
          sql = "select * from dm_hy where hy_dm like '"+request.getParameter("initValue")+"%'";
        }
        conn = new DBConnect();
        conn.setPstmt(sql);
        rs = conn.executeQuery(sql);
        while(rs.next())...{
          out.print("<option value='"+rs.getString("hy_dm")+"'>"+rs.getString("hy_mc")+"</option>");
        }
        out.print("</select>");
     }
     catch (Exception e)...{
     }
     finally...{
          try...{
            if (rs != null)
                rs.close();
            if (conn != null)
                conn.close();
          }
          catch (Exception e)...{
            e.printStackTrace();
          }
     }
   }
   return;
}
%>
<html>
<head>
    <link href="CSS/table.css" type="text/css" rel="stylesheet">
    <script language=vbscript src="css/bytetostr.js"></script>
    <script language=javascript src="css/main.js"></script>//匯入兩個js檔案
</head>
<body>
      <div>所屬行業：</div>
      <div id="hy_dm"></div> //用來顯示返回的字串
      <div >所屬明細行業：</div>
      <div id="hymx_dm"></div>//用來顯示返回的字串
</body>
</html>
<script language="javascript">
       findObject("hy_dm","");
       findObject("hymx_dm","");//這兩條是頁面執行是調用
</script>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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