ajax写三级联动，先写一个文件类吧，以后用的时候直接调用即可；

来找一张表：

实现：

中国地域的三级联动：省、市、区；

图：

说一下思路：

（1）当用户选择省份的时候触发事件，把当前的省份的id通过ajax发出请求传递到服务端的程序中

（2）比如取中国地域，中国是0001，那么自带号为0001的便是中国地域；

北京的代号为11，那么子代号为11的便是北京时的市区，

也就是说根据主代号查询子代号；

（3）服务端根据客户端的请求，查询数据库，并按照一定的格式返回给客户端

显示页面非常简单，只需要一个div，并引入js与jquery文件即可：

<!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="jquery-1.11.2.min.js"></script>

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

</head>

<body>

<h1>三级联动</h1>

<div id="sanji"></div>

</body>

</html>

我需要三个下拉框select，并赋予id写方法

先来写三个下拉框附上id，并执行三个方法：

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

    //三个下拉列表

    //加载显示数据

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

    //加载省份

    FillSheng();

    //加载市

    FillShi();

    //加载区

    FillQu();

}

接下来去写方法；

三个菜单是联动的，也就是根据省的不同可以有不同的选项

这里就不要用click（）点击事件了；用改变状态时执行的改变事件change（）

（1）当省份发生变化的时候：

，

 //当省份发生变化

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

        FillShi();

        FillQu();

    })

市区，区县发生改变

（2）当市区发生变化：

 //当市发生改变

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

        FillQu();

    })

});

区县发生变化；

这个逻辑没毛病；

再来就是把省份的信息加载粗来，并在写完ajax的遍历结束时，值写入市的下拉菜单：

//加载省份信息

function FillSheng()

{

    //根据父级代号

    //取父级代号

    var pcode = "0001";

    //根据父级代号查数据

    $.ajax({

        async:false,

        url:"cl.php",

        data:{pcode:pcode},

        type:"POST",

        dataType:"JSON",

        success:function(data)

{

    var str = "";

    for(var sj in data)

    {

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

    }

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

}

    });

}

//加载市

function FillShi()

{

    //根据父级代号

    //取父级代号

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

    //根据父级代号查数据

    $.ajax({

        async:false,

        //取消异步

        url:"cl.php",

        data:{pcode:pcode},

        type:"POST",

        dataType:"JSON",

    success:function(data)

{

    var str = "";

    for(var sj in data)

    {

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

    }

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

}

});

}

//加载区

function FillQu()

{

    //根据父级代号

    //取父级代号

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

    //根据父级代号查数据

    $.ajax({

        url:"cl.php",

        data:{pcode:pcode},

    type:"POST",

        dataType:"JSON",

    success:function(data)

{

    var str = "";

    for(var sj in data)

    {

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

    }

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

}

});

}

这里的格式用的是JSON 之前都是用"TEXT"

注：JSON

JSON是一种传递对象的语法，对象可以是name/value对，数组和其他对象

 我们用到的是数组，那么我们就需要遍历数组，取到每一条数据，在js中遍历数组用到的是

for(var sj in data)

{

}

来遍历数组。格式！！！

这里来写上面说的那个文件封装类，找到我们以前我们的连接数据库的类：

加上这段：

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

    {

        $db = new mysqli($this->host,$this->zhang,$this->mi,$this->dbname);

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

        if($type == "1")

        {

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

            return json_encode($arr);

//去掉最后竖线

        }

        else

        {

            return $r;

        }

    }

}

嗯，没错

处理页面：

最后来说处理页面：

<?php

$pcode = $_POST["pcode"];

include ("db.class.php");

$db = new db();

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

echo $db->jsonQuery($sql);

连上数据库，对象调用类，写完sql语句直接返回就欧克！！！

就是这么短！

效果图：

 

ajax三级联动下拉菜单的更多相关文章

  1. php+ajax的三级联动下拉菜单

    封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...

  2. ajax 实现三级联动下拉菜单

    ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...

  3. js原生实现三级联动下拉菜单

    js代码: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...

  4. 项目总结01：JSP mysql SpringMvc下中国省市县三级联动下拉框

    JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP  mysql数据库  SpringMvc  ajax   Controller层  Service层  中国地区  省 ...

  5. PHP用ajia代码写三级联动下拉

    下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquer ...

  6. jQuery cxSelect 多级联动下拉菜单

    随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...

  7. jquery+html三级联动下拉框

    jquery+html三级联动下拉框及详情页面加载时的select初始化问题   html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...

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

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

  9. (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术 ...

随机推荐

  1. Flex 数据绑定

    Flex 数据绑定 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:f ...

  2. eclipse xml自动提示

    找到所需要的dtd文件: window->preferences->xml->xml catalog : public id 输入对应的字符串:

  3. linux下的Source命令的基本功能

    source命令用法:source FileName作用:在当前bash环境下读取并执行FileName中的命令.注:该命令通常用命令“.”来替代.如:source .bash_rc 与 . .bas ...

  4. 抓取QQ空间相册

    某天,想下载某人的相册,发现一张一张下载,工作量巨大,所以写了这个工具. 使用到的工具 Fiddler(抓包工具) python(脚本语言) intellij 步骤 分析包 获取相册分类链接信息 打开 ...

  5. HDU5692(线段树+dfs序）

    Snacks Time Limit:5000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit Statu ...

  6. jstree获取整棵树的json数据

    $("#树ID").jstree(true).get_json();

  7. POJ1753 搜索

    Flip Game Description Flip game is played on a rectangular 4x4 field with two-sided pieces placed on ...

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

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

  9. esri-leaflet入门教程（1）-leaflet介绍

    esri-leaflet入门教程(1)-esri leaflet介绍 by 李远祥 关于leaflet,可能很多人比较陌生,如果搭上esri几个字母,可能会有更多的人关注.如果没有留意过leaflet ...

  10. HDU 3785 寻找大富翁

    寻找大富翁 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...