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. Java高级特性之反射

    老规矩我们还是先提出几个问题,一门技术必然要能解决一定的问题,才有去学习掌握它的价值 一. 什么是反射? 二.反射能做什么? 一. 什么是反射? 用在Java身上指的是我们可以于运行时加载.探知.使用 ...

  2. Bootstrap入门（二十七）JS插件4：标签页

    Bootstrap入门(二十七)JS插件4:标签页 标签页的切换可以带动内容的变化 首先我们引入CSS文件 <link href="bootstrap.min.css" re ...

  3. 【python基础】之元组 集合 字典

    元组 元组:元组和列表类似.但是元组中的元素是固定的(不能给一个元组添加,删除和替换元素以及重新排序) 1.创建元组 t1 = () #创建一个空元组 t2 = (1, 2, 3) t3 = tupl ...

  4. Hybrid容器设计之第三方网站

    平台化容器API释放 接上文:(阅读本文前,建议阅读前三篇文章先) 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 之前设计 ...

  5. Javaweb程序服务器部署

    话说从接触web后就想着写一个自己的站点然后别人都可以访问,这也是一个小目标吧,从之前在使用校园网的时候把自己的电脑当成服务器然后部署使用同学的电脑访问,现在想让所有人都可以访问,于是就花重金租了腾讯 ...

  6. windows下composer安装不了或composer命令无效的解决办法

    安装方法: http://docs.phpcomposer.com/00-intro.html#Installation-Windows (官方中文帮助文档) 问题描述1: 通过Composer-Se ...

  7. Java中Redis简单入门

    Redis是一个开源的,先进的 key-value 存储可用于构建高性能,可扩展的 Web 应用程序的解决方案. Redis官方网网站是:http://www.redis.io/,如下: Redis ...

  8. mybatis入门-框架原理

    mybatis是什么 在说mybatis原理之前,我们有必要知道,mybatis到底是个什么东西.mybatis是一个持久层的框架.是一个不完全的ORM框架.因为它需要由程序员自己去写sql语句.但是 ...

  9. uml系列（三）——用例图

    用例图是从用户的角度出发,描述系统功能的.在软件开发过程中,开发人员首先获知用户的需求,然后设计用例模型,在分析并设计系统来实现这些用例.在系统完成后,还要根据用例图来对系统进行验证. 用例图主要介绍 ...

  10. 基于Ubuntu12.04-server版的openstack F版搭建步骤

    本文为双节点搭建,分为计算(IP1)和控制节点(IP2) 说明: 计算节点组件: 1.mysql 2.keystone 3.Nova 4.glance 5.rabbitmq 控制节点组件: 1.cin ...