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

实现技术：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. HTML URL

    HTML 统一资源定位器(Uniform Resource Locators) URL 是一个网页地址. URL可以由字母组成,如"runoob.com",或互联网协议(IP)地址 ...

  2. servlet中的8个Listener

    servlet中的8个Listener: Xml: <?xml version="1.0" encoding="UTF-8"?> <web-a ...

  3. flask蓝图的使用

    首先,我对蓝图的理解相对通俗,就是觉得蓝图对于视图方法模块化.大项目协同开发过程中的一个很好的工具. 1.下图是我们通常情况下使用的项目组织结构

  4. Dev的WPF控件与VS2012不兼容问题

    在只有vs2010环境下Dev的wpf可以在视图模式下显示,但是安装vs2012后无法打开界面的视图模式,报错:无法创建控件实例! 发现是Dev的wpf控件与.net framework 4.5不兼容 ...

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

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

  6. 源码(03) -- java.util.Collection<E>

     java.util.Collection<E> 源码分析(JDK1.7) -------------------------------------------------------- ...

  7. TV端：通过遥控器的点击实现图片的上下左右抖动的效果

    做TV端有一段时间了,我看到别的TV上有一个通过遥控器的触摸板来控制一张图片的相应方向的抖动,感觉听新奇的,就试着做了一个分享一下: 转载注明出处:http://www.cnblogs.com/hyy ...

  8. iOS 设置#ffff 这种颜色

    UI给图的时候给的是#f2f2f2 让我设置.没有你要的rgb. 所以只能自行解决封装了代码 HexColors.h #import "TargetConditionals.h" ...

  9. linux系统盘使用率达到100%的问题查找和解决方法

    今天公司云服务器报警系统发来短信,系统磁盘空间不够,登录服务器进行查看,磁盘使用虑达到100%,       感觉比较奇怪,所存的东西并不多,怎么会将磁盘占满,而且数据都是存在数据盘下,通过简单的进行 ...

  10. 《Effective Objective-C 2.0》 读后总结

    感觉自己最近提升很慢了.然后去找了一些面试题看看.发现自己自大了.在实际开发中,让我解决bug.编写功能,我有自信可以完成.但是对项目更深层的思考,我却没有.为了能进到自己的目标BAT.也为了让自己更 ...