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. 我用Cocos2d-x模拟《Love Live!学院偶像祭》的Live场景（二）

    上一章分析了Live场景中各个元素的作用,这一章开始来分析最关键的部分——打击物件的实现. 上一章放出的视频很模糊,先来看一个清晰版的复习一下:http://www.bilibili.com/vide ...

  2. jquery图片放大镜和遮罩层效果

    图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...

  3. Linux在线安装git(亲测成功)

    一.先检测是否已安装 安装git需要安装一些依赖,但是安装依赖之前需要先检测一下是否已经安装了git. rpm -qa | grep zlib-devel 二.具体安装命令 如果以前没有安装过,则下载 ...

  4. HTML <head>

    HTML <head> 元素 <head> 元素包含了所有的头部标签元素.在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种met ...

  5. Windows Server 2008 R2防火墙入站规则

    一般服务器的端口都设置了外网无法访问,iis中创建的网站外网也是访问不了的,需要创建指定端口的入站规则后方可访问. 方法/步骤     服务器管理器-->配置-->高级安全windows防 ...

  6. Bootstrap入门（二十二）组件16：列表组

    Bootstrap入门(二十二)组件16:列表组 列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容. 1.默认样式列表组 2.加入徽章 3.链接 4.禁用的列表组 5. ...

  7. CodeForces 460B

    Little Dima and Equation Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & ...

  8. 【java设计模式】之 抽象工厂（Abstract Factory）模式

    1. 女娲的失误 上一节学习了工厂模式,女娲运用了该模式成功创建了三个人种,可是问题来了,她发现没有性别--这失误也忒大了点吧--竟然没有性别,那岂不是--无奈,只好抹掉重来了,于是所有人都被消灭掉了 ...

  9. 快速实现python c扩展模块

    1  python扩展模块的组成 在python中,对于一些和系统相关的模块或者对性能要求很高的模块,通常会把这个模块C化.扩展模块中主要包含下面几个部分: init函数,函数名为:init+模块名, ...

  10. C/C++中的联合体

    C/C++中的联合体 利用union可以用相同的存储空间存储不同型别的数据类型,从而节省内存空间.当访问其内成员时可用"."和"->"来直接访问. 当多个 ...