PHP 实现城市多级联动(JQuery)

城市多级联动的实现原理:先遍历父节点  根据父节点的ID, 找到子接点,层层递进,一直遍历到最后一层
城市联动sql地址文件地址:
链接：https://pan.baidu.com/s/1SlTMDmqv1rytWWqTE0Oxdg 
提取码：ju7d

需要两个demo文件

index.php(显示页面)
returnAddress.php(数据库处理,返回信息)

index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市多级联动</title>
    <script src="./jquery-1.7.2.min.js"></script>
</head>
<body>
    <form action="action.php" method="post">
        <select id="sid">
            <option value="" class="ss">--请选择--</option>
        </select>
        <input type="hidden" name="data">
        <button type="submit">提交</button>
    </form>

</body>
<script>
    //第一级别获取
    $.get('./returnAddress.php',{upid:0},function(result){
        //禁止请选择选中
        $('.ss').attr('disabled',true);
        //console.log(result);
        //console.log(result[0]);
        //得到数据数组内容 我们要遍历得到每一个对象
         for(var i = 0;i<result.length;i++){
            //console.log(result[i].name);
            //遍历得到option标签
            var  info = $('<option value="'+result[i].id+'" >'+result[i].name+'</option>');

            //将得到的ootion对象添加到select对象中
            $('#sid').append(info);
        }

    },'json');


    //其他级别
    $('select').live('change',function(){
        //alert($(this).val());
        obj = $(this);
        //通过id来查找下一个级别
        id = obj.val();
        
        //清除所有其他select
        obj.nextAll('select').remove();

        $.getJSON('./returnAddress.php',{upid:id},function(result){
            //console.log(result);
            //创建一个select标签对象
            var select=$('<select></select>');
            //防止当前城市没有办法选择所以添加请选择option标签
            var op = $('<option class="mm">--请选择--</option>');

            select.append(op);

            //循环将得到的数组表里面的option标签添加到select标签中
            for(var i = 0;i<result.length;i++){
                var info = $('<option value="'+result[i].id+'">'+result[i].name+'</option>');
                //将option添加到select标签对象中
                select.append(info);
            }
            //将select添加到当前标签后面
            obj.after(select);
            //把其他级别的请选择禁用
            $('.mm').attr('disabled',true);
        })
    })

    //获取选中的数据提交到操作页面
    $('button').click(function(){
        arr=[];
        console.log($('select'));
        //遍历select
        $('select').each(function(){
            //获取当前select被选中的option标签中的文本值
            sedata = $(this).find('option:selected').html();
            
            //获取到文本值添加到对应的数组中
            arr.push(sedata);
        })
        //删除最后一个数组请选择
        arr.pop();
        //把数据直接给隐藏域的value值即可
        $('input[name=data]').val(arr);
        //先不让他跳转
        //return false;
    })
</script>
</html>

2.returnAddress.php

<?php
    //准备dsn
    $dsn = 'mysql:host=localhost;dbname=district;charset=utf8';
    //连接数据库
    try {
        $pdo = new PDO($dsn,'root','root');
    } catch (PDOException $e) {
        echo $e->getMessage();
    }
    //设置错误模式
    $pdo->setAttribute(3,1);
    //基本操作
    $sql="SELECT * FROM district WHERE upid={$_GET['upid']}";   
    //返回预处理
    $stmt = $pdo->prepare($sql);
    //执行
    $stmt->execute();
    //获取结果内容
    //$list = $stmt->fetchAll(PDO::FETCH_ASSOC);
    $list = $stmt->fetchAll(2);
    //var_dump($list);
    echo  json_encode($list);

附上简单的效果图

简单的效果图

最后编辑于：2019.06.19 12:20:17