实现加载服务器动态目录的多级下拉菜单问题求助

嗨，我来帮你搞定这个动态目录的多级Select联动需求～ 你遇到的问题本质是纯PHP静态渲染没法实时响应用户的选择，所以得结合前端AJAX异步请求+后端PHP动态获取子目录来实现，下面是完整的可运行方案：

一、后端PHP接口（get_subfolders.php） #

这个文件用来接收前端传递的父目录路径，返回该路径下的所有子文件夹（重点做了安全校验，防止目录遍历攻击）：

<?php
// 定义根目录（根据你的实际Project/Department路径修改）
$root_dir = __DIR__ . '/Project/Department';

// 获取前端传递的父路径，默认是根目录
$parent_path = isset($_GET['path']) ? $_GET['path'] : '';

// 拼接完整路径，同时过滤非法路径（关键！防止目录遍历）
$full_path = realpath($root_dir . '/' . $parent_path);
if (!$full_path || strpos($full_path, $root_dir) !== 0) {
    echo json_encode([]);
    exit;
}

// 获取该目录下的所有子文件夹
$subfolders = [];
$dir = dir($full_path);
while (($entry = $dir->read()) !== false) {
    if ($entry != '.' && $entry != '..' && is_dir($full_path . '/' . $entry)) {
        // 存储文件夹名和相对路径（用于下一级请求）
        $subfolders[] = [
            'name' => $entry,
            'path' => $parent_path ? $parent_path . '/' . $entry : $entry
        ];
    }
}
$dir->close();

// 返回JSON格式结果
echo json_encode($subfolders);
?>

二、前端HTML+JS代码（index.php） #

这里实现多级Select的渲染和联动逻辑，每次选择上一级目录后，异步加载下一级的子文件夹：

<!DOCTYPE html>
<html>
<head>
    <title>多级目录选择</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
    <div id="select-container">
        <!-- 第一级Select会自动加载根目录 -->
    </div>

    <script>
        // 初始化第一级Select
        $(document).ready(function() {
            addSelect('');
        });

        // 添加新的Select元素
        function addSelect(parentPath) {
            $.getJSON('get_subfolders.php', {path: parentPath}, function(data) {
                if (data.length === 0) {
                    return; // 没有子文件夹就不再添加
                }

                // 创建新的Select
                var $select = $('<select></select>');
                $select.append('<option value="">请选择文件夹</option>');
                $.each(data, function(index, folder) {
                    $select.append('<option value="' + folder.path + '">' + folder.name + '</option>');
                });

                // 绑定选择事件：移除当前Select之后的所有Select，然后添加新的下一级Select
                $select.change(function() {
                    $(this).nextAll('select').remove();
                    var selectedPath = $(this).val();
                    if (selectedPath) {
                        addSelect(selectedPath);
                    }
                });

                // 添加到容器中
                $('#select-container').append($select);
            });
        }
    </script>
</body>
</html>

三、关键说明 #

1. 安全处理：后端用realpath和路径校验确保用户只能访问指定根目录下的文件夹，避免目录遍历漏洞；
2. 动态扩展性：不管目录嵌套多少层，只要有子文件夹就会自动生成下一级Select，完全适配动态创建的目录；
3. 依赖说明：前端用了jQuery简化AJAX操作，如果你不想用jQuery，也可以换成原生fetch API实现。

你只需要根据实际的根目录路径修改get_subfolders.php里的$root_dir，就能直接运行啦～

内容的提问来源于stack exchange，提问作者PDe