省市区三级联动

发布时间:2020-06-30 00:00:00 阅读:(558)

                                        #### 数据库:
    
    CREATE TABLE IF NOT EXISTS `city` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `name` varchar(30) DEFAULT NULL,
      `parent_id` int(11) DEFAULT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=26 ;
    
    
    INSERT INTO `city` (`id`, `name`, `parent_id`) VALUES
    (1, '安徽', 0),
    (2, '浙江', 0),
    (3, '亳州', 1),
    (4, '合肥', 1),
    (5, '巢湖', 1),
    (6, '涡阳', 3),
    (7, '蒙城', 3),
    (8, '利辛', 3),
    (9, '谯城', 3),
    (10, '杭州', 2),
    (11, '宁波', 2),
    (12, '温州', 2),
    (13, '义乌', 2),
    (14, '嘉兴', 2),
    (15, '巢湖', 4),
    (16, '阜阳', 1),
    (17, '界首', 16),
    (18, '泥鳅', 16),
    (19, '拱墅区', 10),
    (20, '江干区', 10),
    (21, '临湖镇', 6),
    (22, '立德镇', 5),
    (23, '标里镇', 6),
    (24, '花沟镇', 6),
    (25, '义门镇', 6);
    

    前端页面代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>联动</title>
    </head>
    <body>
    
        <p id='liandong'></p>
        <script type="text/javascript" src="./jquery.min.js"></script>
        <script type="text/javascript">
        var url = "index.php";
        $(document).ready(function(e) {    
        //向p里面扔三个下拉
            var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";
            $("#liandong").html(str);
            FillSheng();
            FillShi();
            FillQu();//选中项变化    
            $("#sheng").change(function(){                
                FillShi();
                FillQu();
            })
            $("#shi").change(function(){
                FillQu();
            })
        });//填充省的方法
        function FillSheng()
        {    
            var pcode = "0";       //父级代号    
            $.ajax({
                async:false,
                url:url,
                data:{pcode:pcode},
                type:"POST",
                dataType:"TEXT",
                success: function(data){              //回调函数
                    var hang = data.split("|");    //根据行与行的分隔符来拆
                    var str = "";                    
                    for(var i=0;i<hang.length;i++)
                    {                        
                        var lie = hang[i].split("^");          //列与列的分隔符来拆
                        str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";    //中间显示地区名称                    
                    }
                    $("#sheng").html(str);        //把显示的地区名称填充进去                
                }
    
            });
    
        }//填充市的方法
        function FillShi()
        {    
            var pcode = $("#sheng").val();
            $.ajax({
                async:false,
                url:url,
                data:{pcode:pcode},
                type:"POST",
                dataType:"TEXT",
                success: function(data){                    
                    var hang = data.split("|");                    
                    var str = "";                    
                    for(var i=0;i<hang.length;i++)
                    {                        
                        var lie = hang[i].split("^");
                        str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                    }
                    $("#shi").html(str);
                    }
    
            });
        }//填充区的方法
        function FillQu()
        {    
            var pcode = $("#shi").val();
            $.ajax({
                url:url,
                data:{pcode:pcode},
                type:"POST",
                dataType:"TEXT",
                success: function(data){                    
                    var hang = data.split("|");                    
                    var str = "";                    
                    for(var i=0;i<hang.length;i++)
                    {                        
                        var lie = hang[i].split("^");
                        str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                    }
                    $("#qu").html(str);
                }
            });
        }
    </script>
    </body>
    </html>
    

    php代码

    <?php
    $host = "mysql:dbname=liandong;host=localhost";
    $usr = "root";
    $pwd = "root";
    $db = new PDO($host,$usr,$pwd);
    $pcode = $_POST["pcode"];
    $sql = "select * from city where parent_id='{$pcode}'";
    $res = $db->query($sql);
    $str = '';
    while($data = $res->fetch()){
        $str .= '|'.$data['id'].'^'.$data['name'];
    }
    echo substr($str,1);
    

    效果图:

    效果图