省、市、区三级联动

隔壁老王哟

于 2018-05-21 15:58:56 发布

阅读量325

点赞数

本文链接：https://blog.csdn.net/weixin_42008778/article/details/80393405

版权

代码专栏收录该内容

3 篇文章 0 订阅

订阅专栏

 
 <?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" οnchange="choseCity(1)">  
            <option>请选择</option>  
            <?php  
                foreach( $province_list as $key => $value ){  
                    echo  '<option value='.$value['id'].'>'.$value['area_name'].'</option>';  
                }  
            ?>  
        </select>  
        市  
        <select name="city" οnchange="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);  
                }  
            }  
        })  
    }  
 

[php] view plain copy

 
   [php]  
   view plaincopy
</script>  

 
   [sql]  
   view plaincopy
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='区域字典';  