Question

I have a file structure on my server that looks something like this:

My question is relatively complicated: how do I populate <select> html tags progressively from the contents of the sub-files of a server.

For example, below I have 3 <select> tags that mirror the file structure shown above. When the first select is changed, the jQuery should use AJAX and PHP find that directory on the server, and list all sub-files into the second <select>. When the second one is clicked, all the sub-files of that folder should be listed, and so on. Eventually I want to have 5 <select> tags.

I think this is best accomplished using jQuery, which detects a change in a select:

$("select").change(function() {
        var selected = $(this).children("option:selected").text();
});

sends that variable to AJAX, which asks a PHP file to return an array of the sub-files of that folder, and fill the next select with the data from that array. Where I am not so confident is the PHP.

What I have tried: looked at TreeView systems – not suitable. Tried to modify TreeView systems to work with selects – fruitless! Maybe someone can try and modify the one I’ve linked?

Thanks in advance, any help will be, as always, much appreciated!

Answer 1

populate the select option values with folder dirs:

<div class="selects">
    <select name="folder1">
        <option value="folder1">folder1</option>
        <option value="folder2">folder2</option>
        <option value="folder3">folder3</option>
    </select>
</div>

jQuery:

// Use live. Because the other selects will be filled with jquery.
$("select").live("change", function() {
    var folder = $(this).val();
    var select_id = $(this).attr("name").replace('folder', '');

    $.ajax({
        url: 'ajax.php',
        type: "POST",
        data: {"folder": folder},
        success: function(data) {
            var select = $("<select>");

            select_id++;

            select.attr("name", "folder"+select_id).append(data);
            $(".selects").append(select);
        }
    });
});

Php:

<?php
    $shared = "some/path/to/shared/folders/";
    $folder = $_POST['folder'];

    $scan = scandir($shared.$folder);

    $bad = array(".", "..", ".DS_Store", "_notes", "Thumbs.db");

    $scan = array_diff($scan, $bad);

    foreach ($scan as $val)
    {
        if (is_dir($shared.$folder.'/'.$val))
            echo '<option value="'.$folder.'/'.$val.'">'.$val.'</option>';
    }
?>

I did not tested it there could be some spelling mistakes but this should do the trick