题目要求：

要求：写一个省市区（或者年月日）的三级联动，实现地区或时间的下拉选择。

实现技术：php ajax

实现：省级下拉变化时市下拉区下拉跟着变化，市级下拉变化时区下拉跟着变化。

使用chinastates表查询

<!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>

</head>

<body>

<h1>三级联动</h1>

<select id="sheng"></select>

<select id="shi"></select>

<select id="qu"></select>

</body>

<script type="text/javascript">

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

        sheng();

        shi();

        qu();

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

            shi();

            qu();

        });

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

            qu();

        });

    });

        function sheng() {

            var areacode = "0001";

            $.ajax({

                async:false,

                url: "liandongjiazai.php",

                data: {areacode: areacode},

                type: "POST",

                dataType: "TEXT",

                success: function (data) {

                    var str = "";

                    var hang = data.split("|");

                    for (var i = 0; i < hang.length; i++) {

                        var lie = hang[i].split("^");

                        str = str + "<option value='"+lie[0]+"'>" + lie[1] + "</option>";

                    }

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

                }

            });

        }

        function shi() {

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

            $.ajax({

                async:false,

                url:"liandongjiazai.php",

                data:{areacode:areacode},

                type:"POST",

                dataType:"TEXT",

                success: function(data){

                    var str = "";

                    var hang = data.split("|");

                    for(var i=0;i<hang.length;i++)

                    {

                        var lie = hang[i].split("^");

                        str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";

                    }

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

                }

            });

        }

        function qu() {

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

            $.ajax({

                url:"liandongjiazai.php",

                data:{areacode:areacode},

                type:"POST",

                dataType:"TEXT",

                success: function(data){

                    var str = "";

                    var hang = data.split("|");

                    for(var i=0;i<hang.length;i++)

                    {

                        var lie = hang[i].split("^");

                        str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";

                    }

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

                }

            });

        }

</script>

</html>

　联动处理页面

<?php

$areacode = $_POST["areacode"];

include("LZY.class.php");

$db= new LZY();

$sql = "select * from chinastates WHERE parentareacode='{$areacode}' ";

$arr = $db->Query($sql);

$str = "";

foreach($arr as $v)

{

    $str = $str.implode("^",$v)."|";

}

$str = substr($str,0,strlen($str)-1);

echo $str;

　　

当然，我们也可以用 dataType:"json",方法，为了以后便于使用可以将三级联动做成jQuery插件，这样，变方便了使用。

首先，我们先做出主页面的html代码

<!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>

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

</body>

</html>

然后就是我们封装的js插件了　

// JavaScript Document

// JavaScript Document

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

	//加载三个下拉列表

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

	//加载显示数据

	//加载省份

	FillSheng();

	//加载市

	FillShi();

	//加载区

	FillQu();

	//当省份选中变化，重新加载市和区

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

			//加载市

			FillShi();

			//加载区

			FillQu();

		})

	//当市选中变化的时候，重新加载区

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

			//加载区

			FillQu();

		})

});

//加载省份信息

function FillSheng()

{

	//取父级代号

	var pcode = "0001";

	//根据父级代号查数据

	$.ajax({

			async:false,

			url:"load.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+"</option>";

					}

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

				}

		});

}

//加载市信息

function FillShi()

{

	//取父级代号

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

	//根据父级代号查数据

	$.ajax({

			async:false,

			url:"load.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+"</option>";

					}

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

				}

		});

}

//加载区信息

function FillQu()

{

	//取父级代号

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

	//根据父级代号查数据

	$.ajax({

			url:"load.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+"</option>";

					}

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

				}

		});

}

　最后是

<?php

$pcode = $_POST["pcode"];

include("../../LZY.class.php");

$db = new LZY();

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

echo $db->JsonQuery($sql);

　　如果有需要封装类可以留言

使用php ajax写省、市、区、三级联动的更多相关文章

  1. html实现 省——市——区三级联动

    html实现  省——市——区三级联动 html中实现三级联动是一个不错的demo,博主在这里跟大家分享一下实现的过程,以及自己在过程中出现的一些问题,仅供参考. 首先我们将全国的省市区数据导入进来, ...

  2. 用php和ajax写一个省市区的三级联动，实现地区的下拉选择

    要实现这个页面的三级联动,我们需要建立三个php文件,第一个php文件我们导入jQuery文件,里面嵌入JavaScript:第二个php文件我们做一个php的处理页面,里面引入我们封装好的数据库类文 ...

  3. UIPickerView实现省 市 区三级联动

    前几天用UIPickerView实现了一下三级联动具体的如下图

  4. 第八篇 一个用JS写的省市县三级联动

    前些天,做网站用需要用到一个省市县的三级联动,数据要从数据库里面读取,我想了下思路,动手写了下来.    一.思路           js利用Ajax读取控制器里面的函数,利用函数读取存储过程,返回 ...

  5. JAVA EE 中之AJAX 无刷新地区下拉列表三级联动

    JSP页面 <html> <head> <meta http-equiv="Content-Type" content="text/html ...

  6. jqeury-地区三级联动

    html+js <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...

  7. 补充:ajax PHP html js 实现 三级联动（省 市 区）

    html +  js   在一个页面 php

  8. 在JavaScript文件中用ajax方法实现省市区的三级联动

    1.JavaScript Document $(document).ready(function(e) { 加载三个下拉列表 $("#sanji").html("< ...

  9. AJAX实现三级联动

    省市区三级联动插件: 主页面:为方便使用,不用写过多代码,只写一个id为sanji的div,若别的页面要用,只需写一个id为sanji的div,加载上jQuery与sanji.js文件即可 <! ...

  10. 在使用ajax实现三级联动调用数据库数据并通过调出的数据进行二级表单查询

    在使用ajax实现三级联动查询数据库数据后再使用ajax无刷新方式使用三级联动调出的数据进行二级查询 但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...

随机推荐

  1. eclipse 开始运行提示 Java was started but returned exit code=13

    Eclipse 是一个开放源代码的.基于Java的可扩展开发平台.就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境. 当我们安装使用时,会出现eclipse启动不了,出现" ...

  2. 我用Cocos2d-x模拟《Love Live!学院偶像祭》的Live场景（三）

    [前言和思路整理] 千呼万唤Shi出来啊(好像也没人呼唤),最近公司项目紧,闲暇时间少更得慢,请见谅. 上一章我们分析并实现了打击物件类BeatObject,和它的父节点BeatObjectColum ...

  3. spring mvc在Controller中获取ApplicationContext

    spring mvc在Controller中获取ApplicationContext web.xml中进行正常的beans.xml和spring-mvc.xml的配置: 需要在beans.xml中进行 ...

  4. FlashPlayer11 异步解码 Bitmap

    Flash Player 11引入了一个全新的功能是异步解码位图的功能,这个功能对某些类型的Flash应用会很有效,尤其是需要加载大分辨率的位图的相册或游戏会有显著效果,使用位图图像时,可以异步解码和 ...

  5. java Runtime类

    public class Test { public static void main(String[] args) throws UnsupportedEncodingException { Run ...

  6. DDD创始人Eric Vans:要实现DDD原始意图，必须CQRS+Event Sourcing架构

    http://www.infoq.com/interviews/Technology-Influences-DDD# 要实现DDD(domain drive  design 领域驱动设计)原始意图,必 ...

  7. 离职了，在家温故而知新----1 设计模式 & 开头

    工作四年有余,编写的代码都是业务代码.不涉及低层. 目前离职在家,过年完了,准备找工作了. 决定温故而知新,复习也是学习. 本着随遇而安的原则,随便从之前设计的众多条目中选择了一条开始复习. 设计模式 ...

  8. 创建 vxlan 并部署 instance - 每天5分钟玩转 OpenStack（147）

    上一节我们完成了 OVS VxLAN 的配置工作,今天创建 vxlan100_net 并部署 instance. 创建 vxlan100_net 打开菜单 Admin -> Networks,点 ...

  9. 框架篇：Spring+SpringMVC+hibernate整合开发

    前言: 最近闲的蛋疼,搭个框架写成博客记录下来,拉通一下之前所学知识,顺带装一下逼. 话不多说,我们直接步入正题. 准备工作: 1/ IntelliJIDEA的安装配置:jdk/tomcat等..(本 ...

  10. asp.net权限认证：OWIN实现OAuth 2.0 之简化模式（Implicit）

    asp.net权限认证系列 asp.net权限认证:Forms认证 asp.net权限认证:HTTP基本认证(http basic) asp.net权限认证:Windows认证 asp.net权限认证 ...