PHP+Ajax+Mysql省市县三级联动

最新推荐文章于 2021-03-11 20:06:37 发布

shaonian1996

最新推荐文章于 2021-03-11 20:06:37 发布

阅读量618

点赞数 1

CC 4.0 BY-SA版权

分类专栏： php javascript

本文链接：https://blog.youkuaiyun.com/qq_41179401/article/details/83514208

php 同时被 2 个专栏收录

44 篇文章

订阅专栏

javascript

43 篇文章

订阅专栏

php+ajax+mysql省市县三级联动

效果图：

数据表设计（来自php中文网）：链接：https://pan.baidu.com/s/10P2ueF8JpJ5v2W4HsJtfWQ 密码：5q7i

parent_id：父级的id；region_name：地区名称；region_type：地区类型（省：1，市：2，县：3）；

html:

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
    <h1 align="center">PHP+Ajax+Mysql省市县三级联动</h1>
    <table align="center" border="1" cellpadding="3" cellspacing="0" width="30%">
        <tr bgcolor="skyblue">
            <th>省份</th>
            <th>市</th>
            <th>县</th>
        </tr>
        <tr style="height: 100px">
            <th>
                <select id="provinces">
                    <option value="">请选择省份</option>
                </select>
            </th>
            <th>
                <select id="citys">
                    <option value="">请选择市</option>
                </select>
            </th>
            <th>
                <select id="countys">
                    <option value="">请选择县</option>
                </select><br>
            </th>
        </tr>
    </table>
    <h4>
        <div align="center" id="region"></div></th>
    </h4>
    </body>
</html>

php：

<?php
header("Content-Type:text/html;charset=utf-8");
define("HOST",'localhost');
define("USER",'root');
define("PWD",'12345678');
define("DBNAME",'test');

if(!$conn = @mysql_connect(HOST,USER,PWD)){
        exit('数据库链接失败'.mysql_error());
    };
if(!mysql_select_db(DBNAME)){
    exit('数据库找不到！'.mysql_error());
};
if(!mysql_query('SET NAMES UTF8')){
        exit('字符集设置错误！'.mysql_error());
    };

$type = isset($_GET["type"]) ? $_GET["type"] : "";
$parent_id = isset($_GET["parent_id"]) ? $_GET["parent_id"] : "";
// 链接数据库
if ($type == "" || $parent_id == "") {
    exit(json_encode(array("flag" => false, "msg" => "查询类型错误")));
} else {  
    // 链接数据库
    $sql="select *from global_region where parent_id=$parent_id AND region_type=$type";
    $result = mysql_query($sql);
    if(mysql_num_rows($result)>0)
    {
        $arr=[];
        while ($row=mysql_fetch_array($result))
        {
            $arr[$row["region_id"]]['region_id']=$row["region_id"];//$arr[1]["title"]=$row["title"]
            $arr[$row["region_id"]]['region_name']=$row["region_name"];//$arr[1]["content"]=$arr["content"]
        }
    }
    $provinces_json = json_encode($arr);//数组转json
    exit($provinces_json);
}
?>

index.js使用ajax改变值：

$(function(){
	 //  加载所有的省份
    $.ajax({
        type: "get",
        url: "index.php", // type=1表示查询省份
        data: {"parent_id": "1", "type": "1"},
        dataType: "json",
        success: function(data) {
            $("#provinces").html("<option value=''>请选择省份</option>");
            $.each(data, function(i, item) {
                // alert(item.region_id);
                $("#provinces").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
            });
        }
    })
    // 当省份改变时
    $("#provinces").change(function() {
	    $.ajax({
	        type: "get",
	        url: "index.php",    // type =2表示查询市
	        data: {"parent_id": $(this).val(), "type": "2"},
	        dataType: "json",
	        success: function(data) {
	            $("#citys").html("<option value=''>请选择市</option>");
	            $("#countys").html("<option value=''>请选择县</option>");
	            $.each(data, function(i, item) {
	                $("#citys").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
	            });
	        }
	    });
	});
	// 当市改变时
	$("#citys").change(function() {
	    $.ajax({
	        type: "get",
	        url: "index.php", // type =2表示查询市
	        data: {"parent_id": $(this).val(), "type": "3"},
	        dataType: "json",
	        success: function(data) {
	            $("#countys").html("<option value=''>请选择县</option>");
	            $.each(data, function(i, item) {
	                $("#countys").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
	            });
	        }
	    });
	});
	// 显示地址
	//显示地址
	$("#countys").change(function() {
	    var value = $("#provinces").find("option:selected").text()
	        + $("#citys").find("option:selected").text()
	        + $("#countys").find("option:selected").text();
	    // alert(value);
	    $("#region").html("选择的地址是:"+"<input value='" + value + "'>");
	});
})