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. ORACLE Postgresql中文排序

    当我们order排序不能够实现我们想要的内容时候,尝试一下NLSSORT这个函数吧 他不仅仅按照姓氏排序,名也会排序: nls_param用于指定语言特征,格式为nls_sort      = sor ...

  2. Spring @Aspect实现切面编程

    参考:http://blog.csdn.net/cdl2008sky/article/details/6268628 参考:http://www.360doc.com/content/12/0602/ ...

  3. 二维动态规划——Interleaving String

    97. Interleaving String Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2 ...

  4. Bootstrap入门（二十）组件14：警告框

    Bootstrap入门(二十)组件14:警告框 警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供反馈消息,提示.通知或者警示,可以迅速吸引注意力. 1.情景警告框 2.可关闭的警告框 3. ...

  5. 抓取QQ空间相册

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

  6. SQL Server 手把手教你使用profile进行性能监控

    200 ? "200px" : this.width)!important;} --> 介绍 经常会有人问profile工具该怎么使用?有没有方法获取性能差的sql的问题.自 ...

  7. Linux上使用shell脚本查看内存情况(超实用)

    #!/bin/bashexport chknum=1 #shell搅拌存放目录(输出日志文件执行后也存于该目录)echo 3 > /wls/wls81/shellsyncwhile [ $chk ...

  8. 使用SpringMvc调用POI jar导出excel的源码

    @RequestMapping(value = "/result/export") public String export(ResultIn in,HttpServletRequ ...

  9. 蓝桥网试题 java 基础练习 字母图形

    ----------------------------------------------------------------- 不知道说啥 感觉好像偏离主体思想了 但是这样写好简单 ------- ...

  10. js里的神奇双引号的长度

    "和"这两个引号(注意不是和字,是两侧的两个引号),你看出什么区别了么? 一个是复制进来的,另外一个是写上的,应该是半角英文了? "".length " ...