省、市、区三级联动

其他 2018-05-18 03:25:39 阅读次数: 4

  1. <?php  
  2.   
  3.   
  4. header('content-type:text/html;charset=utf-8');  
  5.   
  6. $mysql_link = new mysqli(  
  7.     '127.0.0.1',  
  8.     'root',  
  9.     '',  
  10.     'test_shop',  
  11.     3306  
  12. );  
  13. //echo '<pre/>';  
  14.   
  15.   
  16. //echo $mysql_link -> connect_error;  
  17.   
  18.   
  19. $mysql_link -> query('set names utf8');  
  20.   
  21.   
  22. if( empty( $_POST ) ){  
  23.     $province_list =$mysql_link -> query(  
  24.         'select * from shop_area where area_parent_id = 0'  
  25.     ) -> fetch_all( MYSQLI_ASSOC );  
  26. }else{  
  27.   
  28.   
  29.     $id = $_POST['id'];  
  30.   
  31.   
  32.     $city_list =$mysql_link -> query(  
  33.         'select * from shop_area where area_parent_id = '.$id  
  34.     ) -> fetch_all( MYSQLI_ASSOC );  
  35.   
  36.   
  37.     echo json_encode(  
  38.         [  
  39.             'data' => $city_list  
  40.         ]  
  41.     );  
  42.     exit;  
  43. }  
  44. //print_r(  $province_list );  
  45. ?>  
  46. <!DOCTYPE html>  
  47. <html lang="en">  
  48. <head>  
  49.     <meta charset="UTF-8">  
  50.     <title>三级联动</title>  
  51. </head>  
  52. <body>  
  53.     <div>  
  54.         省  
  55.         <select name="province" onchange="choseCity(1)">  
  56.             <option>请选择</option>  
  57.             <?php  
  58.                 foreach( $province_list as $key => $value ){  
  59.                     echo  '<option value='.$value['id'].'>'.$value['area_name'].'</option>';  
  60.                 }  
  61.             ?>  
  62.         </select>  
  63.         市  
  64.         <select name="city" onchange="choseCity(2)">  
  65.             <option>请选择</option>  
  66.         </select>  
  67.         区  
  68.         <select name="area">  
  69.             <option>请选择</option>  
  70.         </select>  
  71.   
  72.   
  73.     </div>  
  74. </body>  
  75. </html>  
  76. <script src="../jquery-1.7.2.min.js" type="text/javascript"></script>  
  77. <script type="text/javascript">  
  78.       
  79.     function choseCity( type ){  
  80.   
  81.   
  82.         if( type == 1 ){  
  83.             var type = 1;  
  84.             var id = $('[name=province]').val();  
  85.         }else{  
  86.             var type =2;  
  87.             var id = $('[name=city]').val();  
  88.         }  
  89.         $.ajax({  
  90.             url:'./index.php',  
  91.             type:'post',  
  92.             dataType:'json',  
  93.             data:'id='+id+'&type='+type,  
  94.             success:function( json_data ){  
  95.                 var option_str ='<option>请选择</option>';  
  96.                 $.each(json_data.data,function(k , v){  
  97.                     console.log(k,v);  
  98.                     option_str += '<option value="'+v.id+'">'+ v.area_name+'</option>';  
  99.                 })  
  100.                 if( type == 1 ){  
  101.                     $('[name=city]').html(option_str);  
  102.                     $('[name=area]').html('<option>请选择</option>');  
  103.                 }else{  
  104.                     $('[name=area]').html(option_str);  
  105.                 }  
  106.             }  
  107.         })  
  108.     }  
<?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);
                }
            }
        })
    }
[php] view plain copy
print ?
  1.   
 
   
 
   
 
    
 
     
 
      [php] 
      view plain 
       copy 
      
 
      
 
       print 
      ? 
     
 
    
 
    
     
     
  1. </script>  
    2.  
    
 
   
 
   
</script>
 
   
 
    
 
     
 
      [sql] 
      view plain 
       copy 
      
 
      
 
       print 
      ? 
     
 
    
 
    
     
     
  1. CREATE TABLE `shop_area` (  
    2.  
     
  2.   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '区域主键',  
    3.  
     
  3.   `area_name` varchar(16) DEFAULT NULL COMMENT '区域名称',  
    4.  
     
  4.   `area_code` varchar(128) DEFAULT NULL COMMENT '区域代码',  
    5.  
     
  5.   `area_short` varchar(32) DEFAULT NULL COMMENT '区域简称',  
    6.  
     
  6.   `area_is_hot` varchar(1) DEFAULT NULL COMMENT '是否热门(0:否、1:是)',  
    7.  
     
  7.   `area_sequence` int(11) DEFAULT NULL COMMENT '区域序列',  
    8.  
     
  8.   `area_parent_id` int(11) DEFAULT NULL COMMENT '上级主键',  
    9.  
     
  9.   `init_date` datetime DEFAULT NULL COMMENT '初始时间',  
    10.  
     
  10.   `init_addr` varchar(16) DEFAULT NULL COMMENT '初始地址',  
    11.  
     
  11.   PRIMARY KEY (`id`),  
    12.  
     
  12.   KEY `parent_id` (`area_parent_id`) USING HASH  
    13.  
     
  13. ) ENGINE=InnoDB AUTO_INCREMENT=900001 DEFAULT CHARSET=utf8 COMMENT='区域字典';  
    14.  
    
 
   
 
  
 
 
 

 

 
 
 
  
     
   
  1. <?php  
    2.  
   
  2.   
    3.  
   
  3.   
    4.  
   
  4. header('content-type:text/html;charset=utf-8');  
    5.  
   
  5.   
    6.  
   
  6. $mysql_link = new mysqli(  
    7.  
   
  7.     '127.0.0.1',  
    8.  
   
  8.     'root',  
    9.  
   
  9.     '',  
    10.  
   
  10.     'test_shop',  
    11.  
   
  11.     3306  
    12.  
   
  12. );  
    13.  
   
  13. //echo '<pre/>';  
    14.  
   
  14.   
    15.  
   
  15.   
    16.  
   
  16. //echo $mysql_link -> connect_error;  
    17.  
   
  17.   
    18.  
   
  18.   
    19.  
   
  19. $mysql_link -> query('set names utf8');  
    20.  
   
  20.   
    21.  
   
  21.   
    22.  
   
  22. if( empty( $_POST ) ){  
    23.  
   
  23.     $province_list =$mysql_link -> query(  
    24.  
   
  24.         'select * from shop_area where area_parent_id = 0'  
    25.  
   
  25.     ) -> fetch_all( MYSQLI_ASSOC );  
    26.  
   
  26. }else{  
    27.  
   
  27.   
    28.  
   
  28.   
    29.  
   
  29.     $id = $_POST['id'];  
    30.  
   
  30.   
    31.  
   
  31.   
    32.  
   
  32.     $city_list =$mysql_link -> query(  
    33.  
   
  33.         'select * from shop_area where area_parent_id = '.$id  
    34.  
   
  34.     ) -> fetch_all( MYSQLI_ASSOC );  
    35.  
   
  35.   
    36.  
   
  36.   
    37.  
   
  37.     echo json_encode(  
    38.  
   
  38.         [  
    39.  
   
  39.             'data' => $city_list  
    40.  
   
  40.         ]  
    41.  
   
  41.     );  
    42.  
   
  42.     exit;  
    43.  
   
  43. }  
    44.  
   
  44. //print_r(  $province_list );  
    45.  
   
  45. ?>  
    46.  
   
  46. <!DOCTYPE html>  
    47.  
   
  47. <html lang="en">  
    48.  
   
  48. <head>  
    49.  
   
  49.     <meta charset="UTF-8">  
    50.  
   
  50.     <title>三级联动</title>  
    51.  
   
  51. </head>  
    52.  
   
  52. <body>  
    53.  
   
  53.     <div>  
    54.  
   
  54.         省  
    55.  
   
  55.         <select name="province" onchange="choseCity(1)">  
    56.  
   
  56.             <option>请选择</option>  
    57.  
   
  57.             <?php  
    58.  
   
  58.                 foreach( $province_list as $key => $value ){  
    59.  
   
  59.                     echo  '<option value='.$value['id'].'>'.$value['area_name'].'</option>';  
    60.  
   
  60.                 }  
    61.  
   
  61.             ?>  
    62.  
   
  62.         </select>  
    63.  
   
  63.         市  
    64.  
   
  64.         <select name="city" onchange="choseCity(2)">  
    65.  
   
  65.             <option>请选择</option>  
    66.  
   
  66.         </select>  
    67.  
   
  67.         区  
    68.  
   
  68.         <select name="area">  
    69.  
   
  69.             <option>请选择</option>  
    70.  
   
  70.         </select>  
    71.  
   
  71.   
    72.  
   
  72.   
    73.  
   
  73.     </div>  
    74.  
   
  74. </body>  
    75.  
   
  75. </html>  
    76.  
   
  76. <script src="../jquery-1.7.2.min.js" type="text/javascript"></script>  
    77.  
   
  77. <script type="text/javascript">  
    78.  
   
  78.       
    79.  
   
  79.     function choseCity( type ){  
    80.  
   
  80.   
    81.  
   
  81.   
    82.  
   
  82.         if( type == 1 ){  
    83.  
   
  83.             var type = 1;  
    84.  
   
  84.             var id = $('[name=province]').val();  
    85.  
   
  85.         }else{  
    86.  
   
  86.             var type =2;  
    87.  
   
  87.             var id = $('[name=city]').val();  
    88.  
   
  88.         }  
    89.  
   
  89.         $.ajax({  
    90.  
   
  90.             url:'./index.php',  
    91.  
   
  91.             type:'post',  
    92.  
   
  92.             dataType:'json',  
    93.  
   
  93.             data:'id='+id+'&type='+type,  
    94.  
   
  94.             success:function( json_data ){  
    95.  
   
  95.                 var option_str ='<option>请选择</option>';  
    96.  
   
  96.                 $.each(json_data.data,function(k , v){  
    97.  
   
  97.                     console.log(k,v);  
    98.  
   
  98.                     option_str += '<option value="'+v.id+'">'+ v.area_name+'</option>';  
    99.  
   
  99.                 })  
    100.  
   
  100.                 if( type == 1 ){  
    101.  
   
  101.                     $('[name=city]').html(option_str);  
    102.  
   
  102.                     $('[name=area]').html('<option>请选择</option>');  
    103.  
   
  103.                 }else{  
    104.  
   
  104.                     $('[name=area]').html(option_str);  
    105.  
   
  105.                 }  
    106.  
   
  106.             }  
    107.  
   
  107.         })  
    108.  
   
  108.     }  
    109.  
  
 
 
 
 
<?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);
                }
            }
        })
    }

 
 
 
  
 
   
 
    
 
     [php] 
     view plain 
      copy 
     
 
     
 
      print 
     ? 
    
 
   
 
   
     
    
  1.   
    2.  
   
 
  
 
  
 
 
 
 
 
  
 
   
 
    [php] 
    view plain 
     copy 
    
 
    
 
     print 
    ? 
   
 
  
 
  
     
   
  1. </script>  
    2.  
  
 
 
 
 
</script>
 
 
 
  
 
   
 
    [sql] 
    view plain 
     copy 
    
 
    
 
     print 
    ? 
   
 
  
 
  
     
   
  1. CREATE TABLE `shop_area` (  
    2.  
   
  2.   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '区域主键',  
    3.  
   
  3.   `area_name` varchar(16) DEFAULT NULL COMMENT '区域名称',  
    4.  
   
  4.   `area_code` varchar(128) DEFAULT NULL COMMENT '区域代码',  
    5.  
   
  5.   `area_short` varchar(32) DEFAULT NULL COMMENT '区域简称',  
    6.  
   
  6.   `area_is_hot` varchar(1) DEFAULT NULL COMMENT '是否热门(0:否、1:是)',  
    7.  
   
  7.   `area_sequence` int(11) DEFAULT NULL COMMENT '区域序列',  
    8.  
   
  8.   `area_parent_id` int(11) DEFAULT NULL COMMENT '上级主键',  
    9.  
   
  9.   `init_date` datetime DEFAULT NULL COMMENT '初始时间',  
    10.  
   
  10.   `init_addr` varchar(16) DEFAULT NULL COMMENT '初始地址',  
    11.  
   
  11.   PRIMARY KEY (`id`),  
    12.  
   
  12.   KEY `parent_id` (`area_parent_id`) USING HASH  
    13.  
   
  13. ) ENGINE=InnoDB AUTO_INCREMENT=900001 DEFAULT CHARSET=utf8 COMMENT='区域字典';  
    14.  
  
 
 
 


                    
                    
                    
                    
                    
                    
                    
                    
                    

                        
猜你喜欢

                        

                            
                            
                        

                    


                    
转载自blog.csdn.net/echo_hello_world/article/details/80340465

                    

                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    

                    


                

            

            


                

                    

                        
                        
                        
                        
                    


                    

                        

                            

                                今日推荐
                            


                            

                        

                    

                    

                        

                            

                                火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
                            

                        

                        

                            

                                北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
                            

                        

                        

                            

                                LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
                            

                        

                        

                            

                                国产云输入法——仅华为无云端数据上传安全问题
                            

                        

                        

                            

                                开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
                            

                        

                        

                            

                                开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
                            

                        

                        
                        
                    

                


                

                    

                        

                            

                                周排行
                            

                            

                        

                    

                    

                        

                            

                                Metasploit文件目录与入侵基本概念
                            

                        

                        

                            

                                跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
                            

                        

                        

                            

                                CodeIgniter 源码解读之 CodeIgniter.php（二）
                            

                        

                        

                            

                                SAS入门之（四）改变数据类型
                            

                        

                        

                            

                                初识元组
                            

                        

                        

                            

                                [数学建模]数学建模算法和模型（B站视频）（二）
                            

                        

                        

                            

                                Nginx 服务器源码安装配置流程
                            

                        

                        

                            

                                C#实现语音视频录制 【基于MCapture + MFile】
                            

                        

                        

                            

                                开发进度4
                            

                        

                        

                            

                                下载安装vue的方法网址
                            

                        

                    

                

                

                    

                        

                            

                                每日归档
                            

                            

                                更多
                            

                            

                        

                    

                    

                        

                            2024-04-28(0)
                        

                        

                            2024-04-27(56)
                        

                        

                            2024-04-26(39)
                        

                        

                            2024-04-25(22)
                        

                        

                            2024-04-24(36)
                        

                        

                            2024-04-23(26)
                        

                        

                            2024-04-22(39)
                        

                        

                            2024-04-21(0)
                        

                        

                            2024-04-20(6)
                        

                        

                            2024-04-19(5)
                        

                    

                


            


            
        

    






















    


        

            
代码天地 © 2018 codetd.com

            境外服务器
             
            最新电视剧2022