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

实现技术：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. Raphael初始化，path，circle，rect，ellipse，image

    path jsp: <%@ page language="java" contentType="text/html; charset=UTF-8" pag ...

  2. C# Linq to sql 实现 group by 统计多字段 返回多字段

    Linq to sql 使用group by 统计多个字段,然后返回多个字段的值,话不多说,直接上例子: where u.fy_no == fy_no orderby u.we_no group u  ...

  3. jq操作radio，设置选中、获取选中值

    <label><inputtype="radio"name="sex"value="1">男</label&g ...

  4. cookie、session、sessionid的区别

    我们都知道银行,银行的收柜台每天要接待客户存款/取款业务,可以有几种方案: 1.凭借柜台职员的记忆,由收柜台职员来为每位顾客办理存款/取款业务,单凭职员的记忆力,要记到每位顾客的相貌,并迅速这个顾客当 ...

  5. 实现过程全纪录——自己写一个“微信朋友圈”（包括移动端与PC端）

    一.朋友圈的基本单元--动态 首先定义一个自定义控件用来显示每条动态. 二.运行效果 三.核心解读 PushedMessage 有个PushIndex属性,表示发送消息的index,从0开始递增.每个 ...

  6. canvas动态小球重叠效果

    前面的话 在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动.但是,如果用canvas去实现,却是另一种思路.本文将详细介绍canvas动态小球重叠效果 效果展示 静态小球 首先 ...

  7. iOS Storyboard创建APP 的国际化操作

    Storyboard创建APP 的国际化操作 最近在看<X-code江湖录>这本书,看到了APP 国际化这点,刚刚也简单的实践了一下.现在和大家分享分享! 写的这个简单的Demo全都是用 ...

  8. Fragment 学习笔记(1)

    网上关于Fragment相关的博客资料很多,写关于这个知识笔记是加深记忆,大神略过: 0x01 了解Fragment 当然看官方文档(http://www.android-doc.com/refere ...

  9. jxls2.3-简明教程

    jxls是一个简单的.轻量级的excel导出库,使用特定的标记在excel模板文件中来定义输出格式和布局.java中成熟的excel导出工具有pol.jxl,但他们都是使用java代码的方式来导出ex ...

  10. Android项目实战（三十一）：异步下载apk文件并安装(非静默安装)

    前言: 实现异步下载apk文件 并 安装.(进度条对话框显示下载进度的展现方式) 涉及技术点: 1.ProgressDialog   进度条对话框  用于显示下载进度 2.AsyncTask     ...