目录选择框，然后是子目录选择框或目录和子目录合二为一的选择框

Question

我得到以下代码：

    <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.";
    }
    ?>

这显示所有目录都很好。只有我现在需要另一个选择框，从上面显示所选目录中的目录。

或者有没有办法让这个选择框也显示子目录。

我已尝试复制此脚本并进行更改：

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

和

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

但两者都不起作用。提前感谢您的帮助。

Answer 1

  <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

Answer 2

如果您想要动态更改所选目录中的文件，那么您需要使用 Ajax。您创建另一个空选择并使用调用 ajax 的 php 脚本的输出填充它。使用 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>');
           });
       }
   });
});

为此，您需要在选项中使用 value 属性

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

您的 ajax 调用中的 get_dir.php 文件应如下所示：

<?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";
        }
    }
?>