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

实现技术：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. Canvas 阴影效果

    shadow <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  2. 递归编译的Makefile的实现

    最近写了一个递归Makefile,目的是既可以实现子模块的单独编译,也可以不做任何修改就和整个程序的整体进行无缝衔接的编译.具体的思路是借助第三方文件,将子模块编译好的.o文件的路径自动写到confi ...

  3. Callback Promise Generator Async-Await 和异常处理的演进

    根据笔者的项目经验,本文讲解了从函数回调,到 es7 规范的异常处理方式.异常处理的优雅性随着规范的进步越来越高,不要害怕使用 try catch,不能回避异常处理. 我们需要一个健全的架构捕获所有同 ...

  4. 从jvm的角度来看java的多线程

    最近在学习jvm,发现随着对虚拟机底层的了解,对java的多线程也有了全新的认识,原来一个小小的synchronized关键字里别有洞天.决定把自己关于java多线程的所学整理成一篇文章,从最基础的为 ...

  5. java系列笔记---正则表达式（2）

    正则表达式 说真的正则表达式真不好写,当我收集资料准备开始写的时候,发现收集的东西越来越多范围也越来越广,我文章的前提就是文章要清晰, 在缕清自己思路之后,我从先简后难的方式来写有关正表达式,你们如果 ...

  6. JDBC连接数据库（二）——连接池

    参考博客:http://www.cnblogs.com/xdp-gacl/p/4002804.html 一. 应用程序直接建立数据库连接模型 应用程序直接每次访问数据库时,都建立创建一个数据库的链接, ...

  7. 移动端开发（一. Viewport(视窗)）

    手机与浏览器 移动端开发主要针对手机,ipad等移动设备,随着地铁里的低头族越来越多,移动端开发在前端的开发任务中站的比重也越来越大.各种品牌及尺寸的手机也不尽相同.尺寸不同就算了分辨率,视网膜屏  ...

  8. springMVC整合Junit4进行单元测试

    springMVC整合Junit4进行单元测试 标签: springMVC整合Junit4junit单元测试教程springMVC入门教程   spring(10)  版权声明:本文为博主原创文章,未 ...

  9. flask扩展模块flask-sqlachemy 的使用---mysql数据库

    该篇博客配置环境为:python版本3.5,flask2.0,python3中已经不再支持MySQLdb模块,所有这里我用了pymysql,所有使用前应该 安装pymysql:pip install ...

  10. MONO 如何打包 .NET程序独立运行(winform篇)

    .NET程序独立运行是指运行.NET的电脑上,不需要安装.NET框架. .NET程序集“独立运行”并非真正的独立,它是运行在mono运行时基础之上的.由于这个运行时可以独立存在,所以,我们不需要在目标 ...