要求：写一个省市区（或者年月日）的三级联动，实现地区或时间的下拉选择。

实现技术：php ajax

实现：省级下拉变化时市下拉区下拉跟着变化，市级下拉变化时区下拉跟着变化。

使用chinastates表查询

Ajax加载数据

1.这是chinastates表

2.做一个简单html：ssq.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

        <script src="dist/js/jquery-1.11.2.min.js" ></script>

        <script src="ssq.js"></script>

</head>

<body>

        <div id="ssq"></div>

</body>

</html>

3.根据html做jquery：ssq.js

// JavaScript Document

//当页面内容都加载完才执行

$(document).ready(function(e) {

    //加载三个下拉列表

    $("#ssq").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");

    //加载显示数据

    //1.加载省份

    FillSheng();

    //2.加载市

    FillShi();

    //3.加载区

    FillQu();

    //当省份选中变化，重新加载市和区

    $("#sheng").change(function(){ //当元素的值发生改变时，会发生 change 事件,该事件仅适用于文本域（text field），以及 textarea 和 select 元素。

        //加载市

        FillShi();

        //加载区

        FillQu();

        })

    //当市选中变化，重新加载区

    $("#shi").change(function(){

        //加载区

        FillQu();

        })

});

//加载省份信息

function FillSheng()

{

    //取父级代号

    var pcode ="0001";

    //根据父级代号查数据

    $.ajax({

                //取消异步，也就是必须完成上面才能走下面

                async:false,

                url:"load.php",

                data:{pcode:pcode},

                type:"POST",

                dataType:"JSON",

                success: function(data){

                        var str="";

                        //遍历数组，把它放入sj

                        for(var sj in data){

                            //<option value="11">北京</option>

                            str=str+"<option value='"+data[sj].AreaCode+"'>"+data[sj].AreaName +"</option>";

                        }

                        $("#sheng").html(str);

                }

        });

}

//加载市信息

function FillShi()

{

    //取父级代号

    var pcode =$("#sheng").val();

    //根据父级代号查数据

    $.ajax({

                //取消异步，也就是必须完成上面才能走下面

                async:false,

                url:"load.php",

                data:{pcode:pcode},

                type:"POST",

                dataType:"JSON",

                success: function(data){

                        var str="";

                        //遍历数组，把它放入sj

                        for(var sj in data){

                            //<option value="11">北京</option>

                            str=str+"<option value='"+data[sj].AreaCode+"'>"+data[sj].AreaName +"</option>";

                        }

                        $("#shi").html(str);

                }

        });

}

//加载区信息

function FillQu()

{

    //取父级代号

    var pcode =$("#shi").val();

    //根据父级代号查数据

    $.ajax({

                //不需要取消异步

                url:"load.php",

                data:{pcode:pcode},

                type:"POST",

                dataType:"JSON",

                success: function(data){

                        var str="";

                        //遍历数组，把它放入sj

                        for(var sj in data){

                            //<option value="11">北京</option>

                            str=str+"<option value='"+data[sj].AreaCode+"'>"+data[sj].AreaName +"</option>";

                        }

                        $("#qu").html(str);

                }

        });

}

4.再把数据库连接起来 :load.php,把DBDA重新加载一个方法：JsonQuery

<?php

$pcode=$_POST["pcode"];

include("../fengzhuang/DBDA.class.php");

$db=new DBDA();

$sql="select * from chinastates where ParentAreaCode='{$pcode}'";

echo $str=$db->JsonQuery($sql);
<?php

class DBDA

{   //设定登录默认值

    public $host = "localhost";

    public $uid = "root";

    public $pwd = "root";

    public $dbname = "mydb";

    //设定$type = 1为查询语句，$type =0为增删改语句

    public function Query($sql,$type=1)

    {

        $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);

        $result = $db->query($sql);

        if($type=="1")

        {    //返回查询结果

            return $result->fetch_all();

        }else

        {   //返回ture或false

            return $result;

        }

    }

    //返回字符串

    public function StrQuery($sql,$type=1)

    {

        $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);

        $result = $db->query($sql);

        if($type=="1")

        {

            $arr = $result->fetch_all();

            $str ="";

            foreach($arr as $v)

            {

                $str = $str.implode("^",$v)."|";

            }

            return substr($str,0,strlen($str)-1);

        }else

        {   //返回ture或false

            return $result;

        }

    }

    //返回JSON

    public function JsonQuery($sql,$type=1)

    {

        $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);

        $result = $db->query($sql);

        if($type=="1")

        {

            $arr = $result->fetch_all(MYSQLI_ASSOC);

             return json_encode($arr);

        }else

        {   //返回ture或false

            return $result;

        }

    }

}

做出来的效果如图所示：

然后我们找山东省淄博市张店区：

用php+mysql+ajax+jquery做省市区三级联动的更多相关文章

  1. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

  2. 项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理（在线下单）

    1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...

  3. 【JavaScript&jQuery】省市区三级联动

    HTML: <%@page import="com.mysql.jdbc.Connection"%> <%@ page language="java&q ...

  4. JQuery+Json 省市区三级联动

    一.画面以及JS <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content=&qu ...

  5. jquery全国省市区三级联动插件distpicker

    使用步骤: 1.引入js <script src="distpicker/jquery.min.js" type="text/javascript" ch ...

  6. js&&jQuery实现省市区三级联动

    代码参考了:https://codepen.io/anon/pen/WzyNQB;根据自己的需要修改了一下,挂个出处 1.前端页面代码 <html> <head> <me ...

  7. 用jsp实现省市区三级联动下拉

    jsp+jquery实现省市区三级联动下拉 不少系统都需要实现省市区三级联动下拉,像人口信息管理.电子商务网站.会员管理等,都需要填写地址相关信息.而用ajax实现的无刷新省市区三级联动下拉则可以改善 ...

  8. ajax省市区三级联动

    jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

  9. [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号，在Asp.net 获取不到的，解决办法 .Net程序员 初学Ubuntu ，配置Nignix 夜深了，写了个JQuery的省市区三级级联效果

    [C#]使用 C# 代码实现拓扑排序   目录 0.参考资料 1.介绍 2.原理 3.实现 4.深度优先搜索实现 回到顶部 0.参考资料 尊重他人的劳动成果,贴上参考的资料地址,本文仅作学习记录之用. ...

随机推荐

  1. es6笔记3^_^object

    一.destructuring ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构Destructuring. //es5 if(1){ let cat = 'ken'; le ...

  2. iOS动画案例(1)

       受人所托,做一个类似于qq账号信息里的一个动画,感觉挺有意思,也没感觉有多难,就开始做了,结果才发现学的数学知识都还给体育老师了,研究了大半天才做出来.    先看一下动画效果:   用到的知识 ...

  3. HTML5行业现状与未来 - 2016年终大盘点

    * { margin: 0; padding: 0 } .con { width: 802px; margin: 0 auto; text-align: center; position: inher ...

  4. Git使用规范

    团队开发中,遵循一个合理.清晰的Git使用流程,是非常重要的.为了团队研发的规范性,特制定此规范.当然不同的团队可能有着不同的约定,此规范仅供参考. 目录 1.基本原则 2.建议流程 基本原则 不到万 ...

  5. 龙珠超的新OP【限界突破×サバイバー】

    这首歌真的很燃 下载>>   限界突破×サバイバー 中文歌词 演唱:冰川清志 兴奋了!就去宇宙吧 最先端的“着迷”怎么样! 握在手中 突然想要大笑 糊里糊涂也习惯了吗! I can't g ...

  6. 解决 Eclipse build workspace validation javascript 慢的问题

    参考: http://blog.csdn.net/zhangzikui/article/details/24805935 http://www.cnblogs.com/wql025/p/4978351 ...

  7. TCP/IP协议族(三) 数字签名与HTTPS详解

    前面几篇博客聊了HTTP的相关东西,今天就来聊一聊HTTPS的东西.因为HTTP协议本身存在着明文传输.不能很好的验证通信方的身份和无法验证报文的完整性等一些安全方面的确点,所以才有了HTTPS的缺陷 ...

  8. XmlHepler(拿去就能用)

    [系列目录](./XmlCatalog.html) 前言 本篇是这个系列的最后一篇.也是本人第一次写系列文章,虽然系列中大部分内容都是参考网络,但是自己都有敲代码验证.自己再编写过程中也学习到了很多知 ...

  9. 安卓TCP通信版本2

    PC做服务器,安卓做客户端. 安卓获取输入框的内容并发送,然后等待接收服务器的消息 服务器先行开启,接收到客户端的数据,然后回复消息. 实现了对线程类的封装,通过按钮启动线程发送并接收 服务器代码(j ...

  10. 【转】解决UpdatePanel 与 jQuery的冲突

    现在越来越多的朋友喜欢将jQuery和ASP.NET AJAX 一起来用,最近,许多印度人在forum里抱怨说UpdatePanel和jQuery不兼容,许多jQuery效果在UpdatePanel更 ...