`
2277259257
  • 浏览: 515122 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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

 
阅读更多

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

 首先页面接受第一层下拉框数据。这个应该不难。
 然后通过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">
创建下拉框函数：  

function BuildSel(str,sel){
    sel.options.length=0;
    var arrstr = new Array();
    arrstr = str.split("|");                                                //回调数据被拆分成下拉项的字符数组
    sel.options.add(new Option( "-----请选择-----","")); 
   if(str.length>0){
     for(var i=0;i<arrstr.length;i++){
      var subarrstr=new Array();
      subarrstr=arrstr[i].split(",");                         //每项再次被拆分成下拉项的value,name对数组
      if(subarrstr[1]!="  "&&subarrstr[1]!=null)
      sel.options.add(new Option(subarrstr[1],subarrstr[0]));
     }
     sel.options[0].selected=true;
    }
   }
 
   function GetResult(typeStr,dropid){

    //创建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>

                 <select name="sel1" id="sel1" onChange="GetResult('wx',this.value)">
                     <option value="" selected>-----请选择-----</option>             
                 </select>

                 <input type=text name=txt1 id=txt1 size=10>

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

                 <select name="sel2" id="sel2" onChange="GetResult('khdb',this.value)"">
                    <option value="" selected>-----请选择-----</option>
                 </select>

                 <input type=text name=txt2 id=txt2 size=10>

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

                  <select name="sel3" id="sel3">
                     <option value="" selected>-----请选择-----</option>
                  </select>

                  <input type=text name=txt3 id=txt3 size=10>

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


       <script language="JavaScript">

    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"  onchange="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>

 

 

 

分享到：
| 发送电子邮件 2----javax.mail
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JSP页面下拉框三级联动

    下拉框三级联动功能在JSP页面的实现，不仅提升了用户的操作体验，也展示了JavaScript和AJAX在现代Web开发中的强大能力。通过对上述代码的深入理解和实践，开发者可以更好地掌握这一技能，为用户提供更加友好和高效的...

    jsp-ajax的三级联动(省市区mysql数据库表)

    在IT行业中，"jsp-ajax的三级联动(省市区mysql数据库表)"是一个常见的前端与后端交互的示例，主要用于实现动态下拉菜单的选择效果。在这个项目中，我们可以通过选择省份来自动更新城市列表，进一步选择城市后，区县...

    ajax++jsp二级联动下拉框,无刷新分页

    以上就是关于"ajax++jsp二级联动下拉框,无刷新分页"这一主题的相关知识点，涵盖了Ajax、JSP、二级联动下拉框和无刷新查询等多个方面。通过这些技术，开发者可以创建出更高效、更友好的Web应用程序。

    js+jsp三级联动 源码

    这里，我们主要探讨的是使用JavaScript（js）和JavaServer Pages（jsp）来创建一个具有三级联动功能的系统。这种功能常见于诸如地区选择、产品分类等场景，用户在一个下拉框中做出选择时，其他关联的下拉框会根据...

    下拉框二级联动

    总的来说，“下拉框二级联动”是提高用户体验的一种有效方式，通过AJAX和JSON，我们可以实现前后端的高效通信，动态地更新页面内容，从而提供更加流畅的交互体验。在项目实践中，需要根据具体需求选择合适的技术栈和...

    Ajax实现的三级联动下拉菜单

    struts2+jsp+json+javascript实现的三级下拉菜单，没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp

    实现jsp页面二级下拉框联动，实时读取数据库数据

    通过以上步骤，我们可以实现一个功能完备的JSP页面二级下拉框联动，同时实时从数据库获取数据。这个过程涉及到前后端的交互、数据库操作、事件监听和DOM操作等多个技术环节，是Web开发中一个典型的实例。理解并掌握...

    AJAX jsp 省市区三级联动

    在网页开发中，"AJAX jsp 省市区三级联动"是一个常见的功能，用于实现用户在选择省份时，城市和区县会根据所选省份动态加载，无需刷新整个页面。这种技术提高了用户体验，使交互更加流畅。接下来，我们将详细讨论这...

    jsp从数据库获取数据填充下拉框实现二级联动菜单的方法.docx

    ### JSP从数据库获取数据填充下拉框实现二级联动菜单的方法 #### 一、引言 在Web开发中，为了提高用户体验和数据处理效率，经常需要实现动态数据填充功能，尤其是对于多级联动的选择菜单。本文将详细介绍如何利用...

    超简单的ajax+jsp实现2级联动！！

    在这个"超简单的ajax+jsp实现2级联动"的例子中，我们将探讨如何利用AJAX（Asynchronous JavaScript and XML）技术和JavaServer Pages (JSP)来实现这种功能。 首先，我们需要了解AJAX的基本原理。AJAX允许网页在不...

    ajax 实现二级下拉框，地址联动，serverlet，java，xmlHttp

    首先，二级下拉框联动通常用于地理信息的选择，例如省份选择后，城市下拉框自动更新对应省份的城市。这种功能的核心是，当用户在一级下拉框中选择一个选项时，系统会异步地（即不刷新整个页面）获取并填充二级下拉框...

    JSP+Ajax二级联动实例

    本实例将探讨如何使用JSP（JavaServer Pages）和Ajax（Asynchronous JavaScript and XML）技术实现二级联动效果。 首先，我们需要理解JSP和Ajax的基础概念。JSP是Java的一种服务器端脚本语言，它允许开发者在HTML中...

    中国省市县三级联动下拉框Ajax小程序

    包里有数据库文件，可以导入，包引入后用tomcat就能启动，servlet是通过JSP格式完成联动框，servlet02是通过json格式完成联动框，jdbc已经封装写好，用户名密码只需要改变数据库配置文件即可，Ajax也封装成js文件，...

    jsp中国省市三级联动

    在Java服务器页面（JSP）开发中，"中国省市三级联动"是一种常见的功能，用于创建交互式的下拉菜单，用户可以选择国家、省份和城市，这三个级别之间存在联动关系。这种功能在很多网站的地址填写或者区域选择场景中...

    三级联动下拉框

    在这个案例中，我们讨论的是如何在JavaScript环境中，利用Ajax技术实现一个基于Word版本的三级联动下拉框。 首先，我们需要在数据库中创建三个表，分别代表省份、城市和区域（区县）。这些表通常包含`id`作为主键，...

    ajax实现简单城市三级联动菜单

    在城市三级联动菜单中，当用户在下拉框中选择一个城市时，我们会触发一个AJAX请求，发送当前选中的城市ID到服务器。 JSP（JavaServer Pages）作为服务器端脚本语言，用于生成动态网页内容。在本案例中，JSP将负责...

    jsp+servlet+ajax省市区三级联动

    在这个"jsp+servlet+ajax省市区三级联动"项目中，我们将探讨如何利用这三种技术协同工作来实现这一功能。 首先，JSP（JavaServer Pages）是一种动态网页技术，允许开发者在HTML代码中嵌入Java代码，以服务器端脚本...

    AJAX三级联动(经典例子,自己以前项目中用过的,必须10分的资源)

    **AJAX三级联动**是一种常见的前端交互技术，主要用于实现页面数据的动态加载和更新，而无需刷新整个页面。在这个经典例子中，我们看到它被应用于一个省、市、地区的选择菜单，通过AJAX实现三个下拉框的联动效果。...

    jsp省级市三级下拉联动ajax

    【标题】"jsp省级市三级下拉联动ajax"所涉及的知识点主要集中在Web前端开发、后端编程以及数据库操作上，特别关注了无刷新用户体验的实现。在这个项目中，我们利用JSP（JavaServer Pages）作为后端脚本语言，通过...

Magicbox
Global site tag (gtag.js) - Google Analytics