CODEWITHSUNDEEP
phpdirectorydrop-down-menusubdirectory
user2121008
user2121008

Reputation:

directory selectbox and then subdirectory selectbox or selectbox with directory and subdirectory in one

I got the following code:

    <div style="border:1px solid #CCCCCC; background-color:#F0F0F0; font-family:verdana; font-size:12px; padding:5px;">
    <?php
    $dir = '../klanten';
    // List of file names to exclude from output
    // NOTE: This is case-sensitive
    $exclude = array('klant_aanmaken.php','klanten_overzicht.php','klant_verwijderen.php','domein_aanmaken.php','domeinen_overzicht.php','domein_verwijderen.php','overzicht.php','documenten_toevoegen.php', 'dlf');
    // Check to see if $dir is a valid directory
    if (is_dir($dir)) {
      $contents = scandir($dir);
      echo '<strong>Selecteer klant: </strong><div class="styled-select"><select id="mydropbox">';
      foreach($contents as $file) {
        // This will exclude all filenames contained within the $exclude array
        // as well as hidden files that begin with '.'
        if (!in_array($file, $exclude) && substr($file, 0, 1) != '.') {
  echo '<option>'. $file .'</option>';
        }
      }
      echo '</select></div>';
    }
    else {
      echo "The directory <strong>". $dir ."</strong> doesn't exist.";
    }
    ?>

And this shows all directories fine. Only i need now another selectbox that shows the directories that are inside the selected directory from above.

Or is there a way to make this selectbox show the subdirectories as well.

I have tried copying this script and change this:

           $dir = '../klanten'./.$file;

and

           $dir = '../klanten/'.$file;

but both are not working. Thanks in advance for any help.

Upvotes: 1

Views: 496

Answers (2)

Ganesh Lore
Ganesh Lore

Reputation: 46

  <script>
  $.getJSON( "folderlist.php", function( data ) { 
  var items = ""; $.each( data, function( key, val ) { 
  items += "" + val.name + "";
  }); console.log(items); $("select[id=dynamic][apply=yes]").html(items); 
  });
 </script>

<style>
#dynamic {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding: 2px 30px 2px 2px;
        border: none;
        outline:none;
        background: transparent url("img/br_down.png") no-repeat right center;
      }
</style>

    <div class="selects">
                            <label>Select Folder : </label>
                            <select name="folder1" id="dynamic" apply="yes" onchange="addSelectChange()">

                            </select>

</div>



          <script>
          function addSelectChange(){ 

           $("select[apply=yes]").bind('click',function () {

           var folder = $(this).val();
           var select_id = $(this).attr("name").replace('folder', '');


            var myRegExp = /.php/;
            var string1 = folder;
            var matchPos1 = string1.search(myRegExp);


         if(matchPos1 != -1){

             // if .php file dont do anything ///
             // but delete previously vies directory select box removed if ther ///
             $("select[apply=yes][name=folder"+select_id+"]").nextAll("select[apply=yes]").remove();

         }else{


            $.ajax({
            url: 'filefolder_api.php',
            type: "POST",
            data: {"folder": folder},
            success: function(data) {


         var actual = Number(select_id);
             actual = actual+1;


         $("select[apply=yes][name=folder"+select_id+"]").nextAll("select[apply=yes]").remove();



         if($("select[name=folder"+actual+"]").length >= 0){

             if($("select[name=folder"+actual+"]").length == 1){
                $("select[name=folder"+actual+"]").html(data);   
             }else{
             var newSelectbox   = '<select name="folder'+actual+'" id="dynamic" apply="yes" onchange="addSelectChange()">';
             var selectBoxClose = '</select>';

             $( newSelectbox+data+selectBoxClose ).insertAfter( "select[name=folder"+select_id+"]");
             //console.log("ye");
             }
         }else{
             $("select[apply=yes][name=folder"+select_id+"]").html(data);
             //console.log("oh");
         }

         }});

         }
         });
         <script>

Download Sourcecode for (folderlist.php & filefolder_api.php )

Github Link : https://github.com/ganeshlore/Infinite-Directory-Select-Box-PHP-Jquery

Upvotes: 1

jcubic
jcubic

Reputation: 66590

If you want dynamic change of files in selected directory then you need to use Ajax. You create another empty select and populate it with the output from php script called using ajax. Using jQuery:

$('#mydropbox').change(function() {
   $.getJSON('get_dir.php', {dir: $(this).val()}, function(data) {
       var box = $('#otherbox');
       box.empty();
       if (data) {
           $.each(data, function(i, file) {
               box.append('<option>' + file + '</option>');
           });
       }
   });
});

For this to work you need to use value attribute in option

if (!in_array($file, $exclude) && substr($file, 0, 1) != '.') {
  echo '<option value="' . $file . '">'. $file .'</option>';
}

and your get_dir.php file from ajax call should look like this:

<?php
    $dir = '../klanten/' . $_GET['dir'];
    if (!preg_match('/\.\./', $_GET['dir'])) { // don't allow to traverse directories
        // Check to see if $dir is a valid directory
        if (is_dir($dir)) {
            echo json_encode(scandir($dir));
        } else {
            echo "null";
        }
    }
?>

Upvotes: 0

Related Questions