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. Varnish+Xcache构建高性能WEB构架初探

    本文主要讲述web优化方案和缓存工具的调研及使用.根据目前的测试结果来看,采用varnish+xcache作为 apache和 php缓存这种架构具有高并发.高稳定性,易扩展等优点,服务器的动态请求处 ...

  2. JavaScript的核心

    对象 ECMAScript做为一个高度抽象的面向对象语言,是通过对象来交互的.即使ECMAScript里边也有基本类型,但是,当需要的时候,它们也会被转换成对象. 一个对象就是一个属性集合,并拥有一个 ...

  3. MyBatis java.sql.SQLSyntaxErrorException: ORA-00911: 无效字符

    http://blog.sina.com.cn/s/blog_6da7fcff0101jewf.html 查看SQL语句是否多加了分号";"

  4. MyBatis-Generator的配置说明和使用

    关于MyBatis: MyBatis Generator (MBG) 是一个Mybatis的代码生成器 MyBatis 和 iBATIS. 他可以生成Mybatis各个版本的代码,和iBATIS 2. ...

  5. CodeForces 721A

    A. One-dimensional Japanese Crossword time limit per test:1 second memory limit per test:256 megabyt ...

  6. 个人对现在大众对perl的偏见的一些见解

    最近我都在一些论坛和交流社区学习,发现很多人对perl有很大的偏见. 以我学习那么久的Perl来说吧,也算是有一些小经验了,所以我总结了大家对perl的偏见的原因,无非就是是下面两个的两个原因: 1. ...

  7. 微端游戏启动器launcher的制作（序篇）

    公司要做一个游戏接入腾讯QQ游戏大厅,腾讯要求制作一个launcher,公司之前并没有接入过腾讯,所以大家其实都不懂,而我又是新人,所以刚拿到这个任务的时候整个人就是一个大写的懵逼.在网上查找了不少的 ...

  8. Apache工作原理

                            Apache工作原理 在开始了解Apache前,我们先熟悉一下web服务器,因为apache也是web服务器的一种. Web系统由客户端(浏览器)和服务 ...

  9. JVM内存

    大多数 JVM 将内存区域划分为 Method Area(Non-Heap)(方法区) ,Heap(堆) , Program Counter Register(程序计数器) ,   VM Stack( ...

  10. java学习笔记——Java多客户端与服务器通信

    先说一下大概的思路: 应用多线程来实现服务器与多客户端之间的通信 1.服务器端创建ServerSocket,循环调用accept()等待客户端连接: 2.客户端创建一个Socket并请求与服务器端连接 ...