Question

我有一个脚本，该脚本允许从下拉选择中选择目录，然后在另一个下拉选择中显示其子目录。我正在尝试检查所选目录是否具有子目录，如果显示，则显示一条消息，指示是否有可用的子目录，即"no subdirs"或"subdirs"。

问题是针对从目录下拉列表中选择的最后一个元素而不是当前目录显示警告消息。

例如，如果当前选择为目录2，而先前选择为目录1，则为目录1而不是目录2显示document.getElementById("subdir").options.length;。我不确定问题出在哪里，因此任何帮助将不胜感激，谢谢。

<script type='text/javascript'>
  $(function() {
    $("#dirs").on('change', function() {
      var Dir = $(this).val();
      //Make an ajax call 
      $("#subdir").html('<option>Loading...</option>');
      $.get("ajax.php?Dirs=" + encodeURIComponent(Dir), function(data) {
        $("#subdir").html(data);
      });
    });
  });
</script>
<script>
  function myFunction() {
    var y = document.getElementById("subdir").options.length;

    alert(y);

    if (y <= 1) {
      alert('no subdirs');
    } else if (y > 1) {
      alert('subdirs');
    }
  }
</script>
<select id="dirs" name="Dirs" onChange="myFunction()">
  <option value="" selected="selected" disabled="yes">Select Directory</option>
  <?php
     $dirs = glob("/*", GLOB_ONLYDIR);
     foreach($dirs as $val){
       echo '<option value="'.$val.'">'.basename($val)."</option>\n";
     }
  ?>
</select>
<select name="subdir" id="subdir" required>
  <option value="Select Sub Directory" selected="selected" disabled="yes">Select Sub Directory</value>
</select>

还有ajax.php：

<?php
/* AJAX check  */
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {

  //Check for passed dir exist 
  $folder = $_GET['Dirs'];

  if(!file_exists($folder)) {
    exit('Folder Not Found');
  }

  $out = '';

  $files = array_filter(glob($folder.'/*'), 'is_dir');
  echo '<option value="Select Sub Directory" selected="selected" disabled = "yes">Select Sub Directory</value>';

  foreach($files as $val){
    $out .= '<option value="'.$val.'">'.basename($val)."</option>\n";
  }

  //Output the file options
  exit($out);
}
?>

Answer 1

问题很简单；一切都与时间有关

<select id="dirs" name="Dirs" onChange="myFunction()">

看到这个吗？它的意思是，每当您更改此选择框时，就立即运行名为myFunction()的函数{strong>立即->，甚至在执行任何ajax之前，都要运行此函数！

function myFunction() {
    var y = document.getElementById("subdir").options.length;

    alert(y);

    if (y <= 1) {
    alert('no subdirs');
    }
    else if (y > 1) {
    alert('subdirs');
    }
}

看到它摆弄着#subdir的内容，但仍然没有调用ajax，我们仍然拥有早先#dirs的内容，总之我们在#subdir中有陈旧的数据这就是为什么它总是向您显示以前的数据

如何解决？只需从那里剪切，然后将函数调用移至ajax回调内部

$( "#subdir" ).html( data ); 
 myFunction();
});

document.getElementById（）。options.length显示从列表栏中选择的最后一个元素，而不是当前选择的元素

1 个答案: