jsp-----页面下拉框三级联动( Ajax && js )版

最新推荐文章于 2024-09-06 13:23:10 发布

iteye_8039

最新推荐文章于 2024-09-06 13:23:10 发布

阅读量546

点赞数

分类专栏： servlet/jsp 文章标签：数据库 javascript java ViewUI

本文链接：https://blog.csdn.net/iteye_8039/article/details/82609912

版权

servlet/jsp 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

我跟你说说三级联动的大概流程吧。

首先页面接受第一层下拉框数据。这个应该不难。
然后通过Change_Select()来调用xmlrequest，到后台取第二个下拉框的数据，并且在callback函数中用js完成对第二个下拉框的填充。
第三个下拉框的实现也是一样，当第二个下拉框触发Change_Select2()时，再次从数据库获得第三个下拉框的数据，再在callback2函数中用js完成对第三个下拉框的填充。

三级联动分：AJAX版和JS版

AJAX版-----------------------------------------------------------------------

index.jsp

<%@ page contentType="text/html;charset=gb2312"%>
<html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<script language="JavaScript">
创建下拉框函数：

    //创建Ajax对象
   if (window.XMLHttpRequest) {
       http_request = new XMLHttpRequest();
   } else if (window.ActiveXObject) {
       http_request = new ActiveXObject("Microsoft.XMLHTTP");
   }
   //发送Ajax请求
   var linkurl="dropData.jsp?typeStr="+typeStr+"&numValue="+dropid;
   http_request.open("GET",linkurl,false);
   http_request.send(null);
   //获取回调数据
   var returntxt=unescape(http_request.responseText.replace(" "));//空值转换
   if(returntxt.length>0){
    //document.all.ajax.innerHTML="服务器返回结果：<font color='red'>"+returntxt+"</font>   [Powered by AJAX]"
    if(typeStr=="wx") BuildSel(returntxt,document.getElementById('sel2'));
    if(typeStr=="khdb") BuildSel(returntxt,document.getElementById('sel3'));
   }else{document.all.ajax.innerHTML=""}
}
</script>

     <form name="form1" method="post" action="">
         <table width="90%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
           <tr bgcolor="F1F1F1">
             <td height="24" colspan="2" align="center">琥珀无限级联动菜单-AJAX版 [睿翔网络科技修改]</td>
           </tr>
           <tr bgcolor="#FFFFFF">
             <td width="12%" height="24" align="center">行区:</td>
             <td>

             </td>
           </tr>
           <tr bgcolor="#FFFFFF">
             <td height="24" align="center">外县:</td>
             <td>

              </td>
           </tr>
           <tr bgcolor="#FFFFFF">
             <td height="24" align="center">客户代表:</td>
             <td>

              </td>
           </tr>

           <tr bgcolor="F1F1F1">
             <td height="24" colspan="2" align="center" id="ajax"> </td>
           </tr>
   </table>

    if (window.XMLHttpRequest) {
        http_request = new XMLHttpRequest();
   } else if (window.ActiveXObject) {
        http_request = new ActiveXObject("Microsoft.XMLHTTP");
   }

    var linkurl="dropData.jsp?typeStr=xq";
    http_request.open("GET",linkurl,false);
    http_request.send(null);

    var returntxt=unescape(http_request.responseText)
    BuildSel(returntxt,document.getElementById('sel1'));
    </script>
</form>
</body>
</html>

//*********************************************************

dropData.jsp(连接数据库的JSP页面)
<%@ page contentType="text/html;charset=gb2312"%>
<% response.addHeader("Cache-Control","no-cache"); %>
<%@ page import="java.sql.*"%>
<%Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();
String url="jdbc:oracle:thin:@130.36.30.209:1521:crm";
String user="crm";
String password="crmrnd";
String sqlStr="11";
Connection conn= DriverManager.getConnection(url,user,password);
Statement stmt=conn.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE);
String typeStr = request.getParameter("typeStr");
String numValue = request.getParameter("numValue");
if(typeStr.equalsIgnoreCase("xq"))
    sqlStr = "select * from crm_tbm_xq";
else if(typeStr.equalsIgnoreCase("wx"))
    sqlStr = "select * from crm_tbm_wx where xq = '"+numValue+"'";
else if(typeStr.equalsIgnoreCase("khdb"))
    sqlStr = "select * from crm_user_name Where wx = '"+numValue+"'";
ResultSet rs=stmt.executeQuery(sqlStr);
while(rs.next()){%><%=rs.getString(1) %>,<%=rs.getString(3) %>|<%}%>   //"value,name | value,name"
<%rs.close();
stmt.close();
conn.close();
%>

js版----------------------------------------------------------------------------

<html>

<head>
   <script src="prototype-1.6.0.3.js"></script>
   <script>
         function doAction(index){
                   var arr = new Array;
                   arr[0] =[new Option('--研究方向--','-1')];
                   arr[1] =[new Option('商务英语','english1'),new Option('英美文学','english2')];
                   arr[2] =[new Option('网格计算','computer1'),new Option('计算机软件','computer2'),
                                new Option('图形计算','computer3')];

                   //$('s2').length = 0;
                   $('s2').innerHTML = '';
                   for(i=0;i<arr[index].length;i++){
                        $('s2').options[i] =arr[index][i];
                   }

           }
   </script>
</head>
<body style="font-size:30px;">
         <div id="d1">
         <div id="d1_head">专业选择</div>
         <div id="d1_content">
         <form>
              <select name="s1" id="s1" οnchange="doAction(this.selectedIndex);">
                        <option value="-1">--专业--</option>
                        <option value="english">英语</option>
                        <option value="computer">计算机</option>
              </select>
              <select name="s2" id="s2" style="width:120px;">
                        <option value="-1">--研究方向--</option>
              </select>
              <input type="submit" value="确认"/>
         </form>
         </div>
        </div>
</body>
</html>