`
2277259257
  • 浏览: 498323 次
  • 性别: 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
评论
发表评论

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

相关推荐

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

    里面有四个文件，ajax++jsp二级联动下拉框,ajax实现无刷新查询，Ajax异步

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

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

    下拉框二级联动

    JSP页面，采用ajax和json技术，实现了多个下拉框之间的二级联动，也就是选择第一个下拉框的类容之后，后面的下拉框的类容动态改变

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

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

    Ajax 四级导航菜单ASP+Access动态版

    Ajax与ASP网页交互动态添加删除数据一例 Asp+Ajax无限级联动下拉框菜单Access版 ASP 树形菜单TreeView 多样式版 Ajax仿iGoogle双击编辑、网页拖动完整实例 ASP+jQuery无刷新读写数据库操作 Ajax提交数据实例_Ajax+...

    Ajax二级联动下拉列表框

    当二级联动要实现数据库时实读取时,比较麻烦,本例子用Ajax可以简单实现 ajax+Jsp+js+servlet

    ajax+jquery二级联动实现

    1、Jsp页面 //为了避免jquery中的'$'与其它的'$'冲突,在此将jquery中的'$'重命名为'jQuery' var jQuery=$; //初始化数据 jQuery(document).ready(function(){ getProvince(); });

    Ajax下拉框级联查询（JDBC+Servlet+XMLHttpRequest异步对象）

    文件包括了：项目工程（关键部分注解详细），以及sql文件。功能：选中第一个下拉框，局部刷新第二个下拉框的值，且...主要使用了MySQL，jdbc，servlet，jsp，而异步是使用了原生的JS和XMLHttpRequest异步对象实现的。

    ajax+servlet两级动态级联下拉框

    使用ajax和servlet实现两级下拉框的动态级联

    可编辑的下拉框

    这是一款堪称最完美的下拉框组件，特点如：美化的并且可自定义的外观、使用简单、支持分组、下拉列表展开的方向智能化、下拉框可编辑、集成了ajax联动功能、自定义下拉列表的列数、完美的浏览器兼容性等。...

    Ajax实现二级联动菜单

    本文实例为大家分享了Ajax二级联动菜单的具体代码，供大家参考，具体内容如下 index.jsp &lt;&#37;@ page language=java pageEncoding=UTF-8%&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;二级菜单联动演示&lt;/...

    jQuery+jsp下拉框联动获取本地数据的方法(附源码)

    本文实例讲述了jQuery+jsp下拉框联动获取本地数据的方法。分享给大家供大家参考，具体如下： JQuery下拉框联动很好的体现了Ajax的按需取数据的要求，减小数据的交互量。(点击此处下载源代码) 下面的实例使用Json将...

    AJAX解析XML实例之下拉框省、市二级联动

    这个例子是实现省、市二级联动，当选择某一省时，改省下面的市就会在另一个下拉框显示出来。在本例中AJAX通过解析XML文件得到的数据传回到jsp页面，其中省市均是从数据库取到的值： jsp页面代码： 代码如下: &lt;&#...

    Ajax二级联动菜单实现原理及代码

    [removed]=function() {//页面加载时的函数 } function Change_Select(){//当第一个下拉框的选项发生改变时调用该函数 var province = document.getElementById(‘province’).value; var url =

    ajax完美解决的下拉框的onchange问题

    本来认为这个很好实现，但实际改起来的时候发现问题多多，主要问题是原有的地区联动是用js实现的，它的数据源是一个xml文件，当然如果下拉框是服务器端控件那么问题是很好解决的，现在是html控件一下子似乎还真有些...

    jquery Ajax实现Select动态添加数据

    一般情况下，select下拉框中的数据都是固定的或者直接在jsp中读取列表值显示。但是，这次要实现select与别的选项框联动，也就是要动态添加option数据。查阅了很多资料，终于搞定。下面就分享一下，如何利用jQuery和...

    jQuery chained多级联动插件

    摘要:脚本资源,Ajax/JavaScript,多级联动菜单,下拉框　jquery_chained基于jQuery的一款很不错的jQuery 多级联动插件多级联动插件，本例运行于PHP环境，也可以在ASP、JSP、中使用。jQuery 发展到现在，拥有相当多的...

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