省、市、区三级联动

最新推荐文章于 2023-07-26 18:38:29 发布

奇葩也是花

最新推荐文章于 2023-07-26 18:38:29 发布

阅读量390

点赞数

CC 4.0 BY-SA版权

分类专栏： php

本文链接：https://blog.youkuaiyun.com/u013697959/article/details/79786985

php 专栏收录该内容

60 篇文章

订阅专栏

本文介绍了一个使用PHP实现的三级联动地区选择功能，通过数据库查询实现了省份、城市、区县的联动效果，并利用jQuery简化了AJAX调用过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<?php


header('content-type:text/html;charset=utf-8');

$mysql_link = new mysqli(
    '127.0.0.1',
    'root',
    '',
    'test_shop',
    3306
);
//echo '<pre/>';


//echo $mysql_link -> connect_error;


$mysql_link -> query('set names utf8');


if( empty( $_POST ) ){
    $province_list =$mysql_link -> query(
        'select * from shop_area where area_parent_id = 0'
    ) -> fetch_all( MYSQLI_ASSOC );
}else{


    $id = $_POST['id'];


    $city_list =$mysql_link -> query(
        'select * from shop_area where area_parent_id = '.$id
    ) -> fetch_all( MYSQLI_ASSOC );


    echo json_encode(
        [
            'data' => $city_list
        ]
    );
    exit;
}
//print_r(  $province_list );
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
</head>
<body>
    <div>
        省
        <select name="province" onchange="choseCity(1)">
            <option>请选择</option>
            <?php
                foreach( $province_list as $key => $value ){
                    echo  '<option value='.$value['id'].'>'.$value['area_name'].'</option>';
                }
            ?>
        </select>
        市
        <select name="city" onchange="choseCity(2)">
            <option>请选择</option>
        </select>
        区
        <select name="area">
            <option>请选择</option>
        </select>


    </div>
</body>
</html>
<script src="../jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    
    function choseCity( type ){


        if( type == 1 ){
            var type = 1;
            var id = $('[name=province]').val();
        }else{
            var type =2;
            var id = $('[name=city]').val();
        }
        $.ajax({
            url:'./index.php',
            type:'post',
            dataType:'json',
            data:'id='+id+'&type='+type,
            success:function( json_data ){
                var option_str ='<option>请选择</option>';
                $.each(json_data.data,function(k , v){
                    console.log(k,v);
                    option_str += '<option value="'+v.id+'">'+ v.area_name+'</option>';
                })
                if( type == 1 ){
                    $('[name=city]').html(option_str);
                    $('[name=area]').html('<option>请选择</option>');
                }else{
                    $('[name=area]').html(option_str);
                }
            }
        })
    }

</script>

CREATE TABLE `shop_area` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '区域主键',
  `area_name` varchar(16) DEFAULT NULL COMMENT '区域名称',
  `area_code` varchar(128) DEFAULT NULL COMMENT '区域代码',
  `area_short` varchar(32) DEFAULT NULL COMMENT '区域简称',
  `area_is_hot` varchar(1) DEFAULT NULL COMMENT '是否热门(0:否、1:是)',
  `area_sequence` int(11) DEFAULT NULL COMMENT '区域序列',
  `area_parent_id` int(11) DEFAULT NULL COMMENT '上级主键',
  `init_date` datetime DEFAULT NULL COMMENT '初始时间',
  `init_addr` varchar(16) DEFAULT NULL COMMENT '初始地址',
  PRIMARY KEY (`id`),
  KEY `parent_id` (`area_parent_id`) USING HASH
) ENGINE=InnoDB AUTO_INCREMENT=900001 DEFAULT CHARSET=utf8 COMMENT='区域字典';