Ajax实现三级联动下拉框

最新推荐文章于 2021-10-03 17:02:15 发布
原创 最新推荐文章于 2021-10-03 17:02:15 发布 · 1.8k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ajax #xmlhttprequest #null #sqlserver #microsoft #hibernate

本文介绍了一种利用Ajax技术实现省市区三级联动下拉框的方法，并提供了完整的JSP页面和数据库交互代码示例。

现在的假设为省市区三级.数据库中有相应的三个表

CREATE TABLE [dbo].[area] (
 [id] [int] NOT NULL ,
 [areaID] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
 [area] [nvarchar] (60) COLLATE Chinese_PRC_CI_AS NULL ,
 [father] [nvarchar] (6) COLLATE Chinese_PRC_CI_AS NULL 
) ON [PRIMARY]
GO

CREATE TABLE [dbo].[city] (
 [id] [int] NOT NULL ,
 [cityID] [nvarchar] (6) COLLATE Chinese_PRC_CI_AS NULL ,
 [city] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
 [father] [nvarchar] (6) COLLATE Chinese_PRC_CI_AS NULL 
) ON [PRIMARY]
GO

CREATE TABLE [dbo].[province] (
 [id] [int] NOT NULL ,
 [provinceID] [nvarchar] (6) COLLATE Chinese_PRC_CI_AS NULL ,
 [province] [nvarchar] (40) COLLATE Chinese_PRC_CI_AS NULL 
) ON [PRIMARY]
GO

 

显示页面showinof.jsp

 

<%@ page pageEncoding="GBK"%>
<jsp:directive.page import="java.sql.*" />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAd>
  <TITLE>Ajax实现三级联动下拉框</TITLE>
  <script type="text/javascript">
            if (window.ActiveXObject && !window.XMLHttpRequest) {
                window.XMLHttpRequest=function() {
                    return new ActiveXObject((navigator.userAgent.toLowerCase().indexOf('msie 6') != -1) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP');
                };
            }//取得XMLHttpRequest对象     
            var req;
            var flagSelect;
            function testName(flag,value)//使用Ajax访问服务器
            {
             flagSelect = flag; //标记一下当前是选择省,还是选择市
             req=new XMLHttpRequest();
             if (req) 
             {
                 req.onreadystatechange=setValue;
             }
                req.open('POST',"getinfo.jsp?flag="+flag+"&value="+value);//把参数带到服务器中
                req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                req.send(null);
         }
            function setValue()
            {
                if (req.readyState==4 )//访问到服务器
                {           
                    if(req.status==200)//正确返回
                    {    
                        if(flagSelect=="1")//如果选择某个省要更新市和区
                        {
                            var v=req.responseText.split("||");//req.responseText是服务器返回来的字符串
                            paint(document.all("shi"),v[0]);//更新市下拉框
                            paint(document.all("qu"),v[1]);//更新区下拉框
                        }
                        if(flagSelect=="2")//如果选择某市,只需改变区
                        {
                            var v=req.responseText;
                            paint(document.all("qu"),v);//更新区下拉框
                        }
                    }
                }
            }
            function paint(obj,value)//根据一对数据去更新一个下拉框
            {
                var ops = obj.options;
                 var v=value.split(";");//得到一些数据,(修改过了..)
                    while(ops.length>0)//先清空原来的数据
                    {
                      ops.remove(0);
                    }
                    for(var i=0;i<v.length-1;i++)//把新得到的数据显示上去
                    {
                        var o = document.createElement("OPTION");//创建一个option把它加到下拉框中
                        o.value=v[i].split(",")[0];
                        o.text=v[i].split(",")[1];
                        ops.add(o);
                    }
            }
            </script>
 <body>
  <%
  try {
  Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver").newInstance();
  Connection conn = DriverManager.getConnection(
    "jdbc:microsoft:sqlserver://127.0.0.1:1433;databasename=hibernate",
    "sa", "");
  ResultSet rs = conn.createStatement().executeQuery("select * from province order by provinceID");
  %>
  <table>
   <tr>
    <td>省<select name="pro" onchange="testName(1,this.value);">
      <%
      while (rs.next()) {
       out.println("<option value='" + rs.getString("provinceID")
       + "'>" + rs.getString("province") + "</option>");
      }
      %>
     </select>
    </td>

    <%
     rs = conn.createStatement().executeQuery(
       "select * from city  t2 where t2.father=(select min(t1.provinceID) from province t1)   order by cityID");
    %>
    <td>市<select name="shi" onchange="testName(2,this.value);">
      <%
      while (rs.next()) {
       out.println("<option value='" + rs.getString("cityID")
       + "'>" + rs.getString("city") + "</option>");
      }
      %>
     </select>
    </td>

    <%
    rs = conn.createStatement().executeQuery(
        "select * from area  t3 where t3.father=(select min(t2.cityid) from city t2 where t2.father=(select min(t1.provinceID) from province t1) )   order by areaid");
    %>

    <td>区<select name="qu">
      <%
      while (rs.next()) {
       out.println("<option value='" + rs.getString("areaid")
       + "'>" + rs.getString("area") + "</option>");
       }
        rs.close();
        conn.close();
       } catch (Exception e) {
        e.printStackTrace();
       }
      %>
     </select>
    </td>
   </tr>
  </table>
 </body>
</HTML>

取得数据库页面getinfo.jsp

 

<%@ page pageEncoding="GBK"%>
<jsp:directive.page import="java.sql.*" />
<jsp:directive.page import="java.io.IOException" />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <body>
        <%
            response.setContentType("text/xml; charset=GBK");
            out.clear();
            try {
                String flag = request.getParameter("flag");
                String value = request.getParameter("value");
                if (flag == null) {
                    return;
                }
                StringBuffer values = new StringBuffer("");
                Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver")
                .newInstance();
                Connection conn = DriverManager
                .getConnection(
                        "jdbc:microsoft:sqlserver://127.0.0.1:1433;databasename=hibernate",
                        "sa", "");
                Statement stmt = conn.createStatement();
                ResultSet rs = null;
                //getconnection;
                //query
                //rs 
                if (flag.equals("1")) {
                    rs = stmt
                    .executeQuery("select  cityid,city from city  where  father='"
                    + value + "' order by cityid");
                    while (rs.next()) {
                values.append(rs.getString(1) + "," + rs.getString(2)
                        + ";");
                    }
                    String ff = values.substring(0, values.indexOf(","));//最得敢小的市编号
                    System.out.println(ff);
                    rs = stmt
                    .executeQuery("select areaid,area from area where father='"
                    + ff + "'  order by areaid");
                    values.append("||");//区分市和区信息.
                    while (rs.next()) {
                values.append(rs.getString(1) + "," + rs.getString(2)
                        + ";");
                    }
                    System.out.println(values.toString());
                } else if (flag.equals("2")) {
                    rs = stmt
                    .executeQuery("select areaid,area from area  where father='"
                    + value + "'  order by  areaid");
                    while (rs.next()) {
                values.append(rs.getString(1) + "," + rs.getString(2)
                        + ";");
                    }
                } else {
                }
                out.println(values.toString());
                out.flush();
                out.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        %>
    </body>
</HTML>



 

以上代码利用SQL 2000和利用

http://www.cnblogs.com/Files/singlepine/area1.rar 中的三个表area,city,province的数据(全国省市区)测试通过.


Ajax实现的三级联动下拉菜单
10-20
struts2+jsp+json+javascript实现的三级下拉菜单，没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp
Ajax实现三级联动
10-30
利用vs2005+sql2005实现的省市县三级联动.
Ajax实现二级/三级联动下拉框---servlet版
07-26
Ajax实现二级/三级联动下拉框---servlet版
三级联动的代码
iteye_6145的博客
12-14 291
基于网友的要求，我贴出在项目中用到的三级联动的代码： jsp的代码： var req; window.onload=function(){ } function Change_Select() ...
利用Ajax来实现地区三级联动
qq_43573667的博客
12-29 5208
基于jQ-Ajax的三级联动 前言：利用Ajax来实现一个地区的三级联动，用Java代码来读json文件，先eclipse做一个简单的，最基础的。（json我用的jackson来解析，也可用fastjson-阿里巴巴的等还有很多）提供代码，思路之类的，注释也没有自己去想去琢磨出来的思路好 first：首先先要熟悉json文件，并要想好利用什么类型去解析，这是最难的，最好找一个没人的地方戴上耳机（对于初学）我是用maven来做的用到的jar坐标 ： <dependency> <grou
Ajax实现三级联动下拉框的代码分享
"本文主要介绍了如何使用Ajax技术实现三级联动下拉框的功能，适用于网页中的动态数据筛选和交互。" Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它...
Ajax实现三级联动下拉框-数据库结构与示例代码
"这篇文档涉及的是使用JavaScript和数据库来实现三级联动下拉框的功能，主要用于在网页中展示省市区信息。文档中提供了SQL创建数据库表的代码，以及一个简单的JSP页面示例，该页面使用Ajax技术来实现联动效果。" 在...
解决layui 三级联动下拉框更新时回显的问题
10-16
在使用layui框架开发前端页面时，经常会遇到三级联动下拉框的场景。所谓三级联动，是指在一个表单中，当用户选择了一个省份时，城市下拉框会相应地更新为该省份下的城市列表；同理，当选择了某个城市时，相应的区域...
jQuery使用EasyUi实现三级联动下拉框效果
10-20
要实现三级联动下拉框效果，首先需要了解jQuery以及EasyUI库的相关知识。EasyUI是一个基于jQuery的前端UI框架，它提供了一套轻量级的用户界面解决方案，包括各种组件，例如：对话框、菜单、标签页、数据网格等等，...
ajax 实现三级联动
qq_44154912的博客
04-13 409
html 这里是初始状态 ， 还没有经过联动 ，会显示所有数据 所有的数据放在一张字典的表格中 ， 根据 type 字段 决定是什么字典（天气、路况、公司、省市区等） <%--新需求 添加 过错行为适用对象 过错行为大类 过错行为 --%> <td>过错行为适用对象</td> <td> <select id="caseUserInfoList{{idx}}_faultObject"
Ajax之三级联动
Programer0的博客
02-29 746
Ajax练习：利用Ajax实现省、市、县三级联动显示，实现代码如下： HTML代码 <body onload="demo()"> 省: <select id="pro" onchange="demo1(this.value)"> <option>--请选择--</option> </select&g...
Ajax-三级联动
qq_42861526的博客
10-03 391
一、导入数据表和gson.jar 该表包括了中国所有的省、市、县、区，它们之间通过parentid关联。 二、后端代码 由于每一级的数据都是根据上一级的id查询而来，逻辑十分相似，故我们只需要一个接口就可以完成三级甚至更多级的联动，在这个案例中我们的核心查询就是select * from area where parentid=#{pid} entity package com.codeXie.entity; import java.io.Serializable; public class Area
利用Ajax来实现下拉框的三级联动
三人禾木风
11-07 1600
常看一些网站，有省份、市、县三个下拉框，且有联动的功能。某天闲来无聊，试做了一个， 数据库表 1.在web.config的下加入代码如下 2.新建一个类库ajaxApp（添加引用Ajax.dll），并添加一个类AjaxFunctions        using System; using System.Web.UI.We
使用ajax实现三级联动菜单
愿记忆Tel一切安好
03-14 657
index.html文件     三级联动     function getArea(val,table){   var xhr;  if(window.ActiveXObject){  xhr = new ActiveXObject("Microsoft.XMLHTTP");  }else if(window.XMLHttpRequest){  xhr = new XML
ajax+jsp实现三级联动下拉框
weixin_30646505的博客
11-26 240
js文件sjld.js ： $(document).ready( function(){ $.ajax({ url:"bindZ", type:"get", dataType:"json", success:bindZList }); } ); //回调函数 function bindZLis...
通过AJAX实现三级下拉框查询省市等
weixin_33872566的博客
05-24 150
2019独角兽企业重金招聘Python工程师标准>>> ...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值