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

实现技术：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. easyUI 添加排序到datagrid

    http://www.cnblogs.com/javaexam2/archive/2012/08/10/2632645.html

  2. Bootstrap入门（十七）组件11：分页与标签

    Bootstrap入门(十七)组件11:分页与标签   1.默认样式的分页 2.分页的大小 3.禁用的分页 4.翻页的效果 5.两端对齐的分页 6. 标签的不同样式 7. 标签的大小   先引入本地的 ...

  3. Bootstrap入门（八）组件2：下拉菜单

    Bootstrap入门(八)组件2:下拉菜单   先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link ...

  4. （二）Hololens Unity 开发之 语音识别

    学习源于官方文档 Voice input in Unity 笔记一部分是直接翻译官方文档,部分各人理解不一致的和一些比较浅显的保留英文原文 (二)Hololens Unity 开发之 语音识别 Hol ...

  5. SQL递归查询知多少

    最近工作中遇到了一个问题,需要根据保存的流程数据,构建流程图.数据库中保持的流程数据是树形结构的,表结构及数据如下图: 仔细观察表结构,会发现其树形结构的特点: FFIRSTNODE:标记是否为根节点 ...

  6. 如何让微信小程序快速接入七牛云

    如果你确定用七牛运行小程序的话,给大家分享一个九折优惠码:61d1fd4d1 月 9 日 微信小程序正式发布,小程序终于揭开了它神秘的面纱,开发者对小程序的追捧更是热度不减.从小程序的热门应用场景来看 ...

  7. ubuntu 下配置Web服务器

    ubuntu 下配置Web服务器 1.切换管理员身份 终端/文本界面输入命令: su 根据提示输入密码 注: 如果不能使用su 点击查看如何启用su2.安装MySQL5 apt-get install ...

  8. ajax提交的javascript代码

    var xhr=xhr(); function xhr(){ if(window.XMLHttpRequest){ return   window.XMLHttpRequest(); }else if ...

  9. java_db2错误码对应值

    DB2-SQLSTATE消息 2012-08-27 10:35:27|  分类: db2|举报|字号 订阅     本节列示 SQLSTATE 及其含义.SQLSTATE 是按类代码进行分组的:对于子 ...

  10. 日志组件 logback

    一.简介 Logback是由log4j创始人设计的又一个开源日志组件.logback当前分成三个模块:logback-core,logback- classic和logback-access.logb ...