首页 > > 网络编程 > Php编程 >

使用php ajax写省、市、区、三级联动

2018-06-22 05:11:42来源：未知阅读 ()

题目要求：

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

实现技术：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);

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有