省市县三级联动AJAX实现(附MySQL数据)

最新推荐文章于 2024-02-13 21:30:14 发布

huwhois

最新推荐文章于 2024-02-13 21:30:14 发布

阅读量7.6k

点赞数 2

分类专栏：坑与跳坑 web php 文章标签： ajax php 省市县三级联动省市县sql数据

本文链接：https://blog.csdn.net/huwhois/article/details/78401444

版权

php 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

web

4 篇文章 0 订阅

订阅专栏

坑与跳坑

3 篇文章 0 订阅

订阅专栏

省市县三级联动是web开发中常用的功能，网上有很多实现的方法，笔者在这也提供一中ajax实现的方法(后台php处理)。
html代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>省市县</title>
<style>
.box {
	margin-left:20px;
	margin-top: 20px;
	width: 300px;
	height: 200px;
	border: 1px dashed black;
}
h2 {
	text-align: center;
}
span {
	font-size:20px;
	width: 66px;
	height: 30px;
	margin-left: 20px;
	display: inline-block;
}
select {
	width: 100px;
	height: 30px;
	font-size:16px;
}
.sub {
	margin-left: 200px;
	margin-top: 5px;
	width: 70px;
	height: 30px;
	font-size:20px;
	line-height: 20px;
	background-color: rgb(49, 159, 229);
	color: white;
	border-radius: 3px;
	border: none;
}
</style>
<script src="js/jquery.js"></script>
</head>
<body>
<div class='box'>
    <h2>省市县/区三级联动</h2>    
    <form id="pcc" action="action.php" method="POST">
        <span>省&nbsp;&nbsp;&nbsp;:</span>    
        <select id="pro" name="pro">
        </select><br/>

        <span>市&nbsp;&nbsp;&nbsp;:</span>    
        <select id="city"  name="city">
        </select><br/>

        <span>县/区:</span>    
        <select id="county"  name="county">
        </select><br/>
        <input class="sub"  type="submit" value="提交" >
    </form>
</div>
<script>
$(function(){
    $.ajax({
        type:"POST",
        cache:false,
        url:"pcc.php",
        data:{"pid":0},
        dataType:"json",
        success:function(data){
            var option='<option>--请选择--</option>';
            $.each(data,function(i,n){
                option += '<option value="'+n.id+'">'+n.areaname+'</option>';
            })
            $("#pro").append(option);
        }
    });

    $("#pro").change(function(){
        var pid=$(this).val();
        $.ajax({
        type:"POST",
        cache:false,
        url:"pcc.php",
        data:{"pid":pid},
        dataType:"json",
        success:function(data){
        //追加本级option前，先清除city和county的option，以免重选时干扰
            $("#city option").remove(); 
            $("#county option").remove();
            var option='<option>--请选择--</option>';
            $.each(data,function(i,n){
                option += '<option value="'+n.id+'">'+n.areaname+'</option>';
            })
            $("#city").append(option);
        }
        });
    });
    
    $("#city").change(function(){
        var pid=$(this).val();
        $.ajax({
        type:"POST",
        cache:false,
        url:"pcc.php",
        data:{"pid":pid},
        dataType:"json",
        success:function(data){
        //同上
            $("#county option").remove();
            var option='<option>--请选择--</option>';
            $.each(data,function(i,n){
                option += '<option value="'+n.id+'">'+n.areaname+'</option>';
            })
            $("#county").append(option);
        }
        });
    });
})
</script>
</body>
</html>

本方法需要用到jquery，请自行下载

如上所示，本文将选项<option>都放在ajax请求里，ajax请求每次提供pid(初始值为0,即顶级id),返回两个参数，本级id和父级pid;通过chang事件追加需要提供的<option>。

php代码如下：

pcc.php

<?php 
require("mysqldb.php");

$mydb=new MysqliDB();

$pid=$_POST['pid'];

$sql="select * from cn_area where parentid=$pid;";
// echo $sql;exit;
$datas=$mydb->select($sql);

echo json_encode($datas);

mysqldb.php:

<?php
class MysqliDB { 

    private  $conn;

    function __construct(){
        $conn=mysqli_connect('127.0.0.1','root','*****','test');
        if(!$conn){
            die("连接失败".mysqli_connect_error());
        }
        mysqli_query($conn,'set names utf8');
        $this->conn=$conn;
    }
    function select($sql) {
        $result=mysqli_query($this->conn,$sql);    
        $data=array();
        // var_dump($result);exit;
        while( $arr=mysqli_fetch_assoc($result) ){
            $data[]=$arr;
        }    
        return $data;     
    }
    function close() {
     mysqli_close($this->conn);
    }

action.php

<?php
require("mysqldb.php");
$mydb=new MysqliDB();

//print_r($_POST);exit;
$sql="select * from cn_area where id IN(".$_POST['pro'].",".$_POST['city'].",".$_POST['county'].");";
// echo $sql;exit;
$datas=$mydb->select($sql);
// echo "<pre>";
// print_r($datas);exit;
$addr="";
foreach( $datas as $v){
    $addr .= $v['areaname'];
}
echo "您选则的地址为：".$addr."<br/>";
echo "<a href='' onclick='window.history.back();'>点击返回</a>"