题目要求：

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

实现技术：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. VMware虚拟机出现Reason: Failed to lock the file

    打开VMware出现Cannot open the disk *.vmdk or one of the snapshot disks it depends on.Reason: Failed to l ...

  2. Adapter接口及实现类

    Adapter本身只是一个接口,它派生了ListAdapter和SpinnerAdapter两个子接口,其中ListAdapter为AbsListView提供列表项,而SpinnerAdapter为A ...

  3. Eclipse中应用的调试

    作为编程人员,程序的调试是一项基本功.在不使用IDE的时候,程序的调试多数是通过日志或者输入语句(System.out.println)的方式.可以把程序运行的轨迹或者程序运行过程中的状态显示给用户, ...

  4. SVN官方版本下载地址

    TortoiseSVN 客户端 &  Language packs 语言包 : https://tortoisesvn.net/downloads.html VisualSVN 插件官方地址: ...

  5. c#使用DotNetZip封装类操作zip文件(创建/读取/更新)实例

    DotnetZip是一个开源类库,支持.NET的任何语言,可很方便的创建,读取,和更新zip文件.而且还可以使用在.NETCompact Framework中.  下载地址在这里:http://dot ...

  6. weblogic 集群部署时上传jsp不更新问题

    在进行集群部署的时候,进行“源可访问性”设置的时候,要注意选择“我要使部署能够通过下列位置进行访问”: 前提是必须有共享存储:

  7. doubango(2)--底层协议栈结构分析

    tsip_stack_handle_t 实例 1.        tsip_stack_handle_t的创建 在底层,真正运转的协议栈结构式tsip_stack_handle_t的一个实例,它的创建 ...

  8. Node.js理解

    JavaScript单线程的误解 在我接触JavaScript(无论浏览器还是NodeJS)的时间里,总是遇到有朋友有多线程的需求.而在NodeJS方面,有朋友甚至直接说到,NodeJS是单线程的,无 ...

  9. SoapUI：入门实例

    这一章中我们要掌握如下内容: 1)         构建项目: 2)         运行单个请求: 3)         构建测试用例: 4)         接口之间传递参数,组织测试步骤: 5) ...

  10. 3D游戏开发之在UE4中创建非玩家角色(NPC)

    接着上节我们继续学习,现在我们来创建一些NPC(non-playable characters,非玩家角色).在这个游戏中,当我们靠近NPC时,它们会做出相应的反应. 一 创建C++类 1) 在UE编 ...