Populate select from server directory PHP jQuery AJAX

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

get directory-paths using methods discussed here --> Using scandir() to find folders in a directory (PHP)

Collect strin(paths) of child dir/files and construct next level of

Answer 2

1. Make your AJAX request via JQuery on select change of the first select with a container appended in the selector, like this: $('ajax_process.php #select_a').post()

2. Setup your receiving AJAX page like this:

   //<?php
   //work, etc
   
   
   //you said "return array of the sub-files", so I reckon:
   
   $select = "<select id='data'>";
   foreach ($array as $select_item) {
      $select .= "<option value='$select_item'" . $select_item . "</option>";
   }
   $select .= "</select>";
   
   
   //now $select contains your HTML code for your select box.
   ?>
   
   //break out of php, then:
   <span id="select_a">
   <?php print $select; ?>
   </span>
   

3. Your AJAX call can now return your dynamic select box.

Answer 3

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