根据所选内容在下拉列表中显示文件名

Question

我需要从选择框中获取一个值，并将其用于页面上的一个PHP函数。

我有index.php与常规选择下拉菜单。选择框中的值和选项是文件夹的名称。当我选择一个文件夹时，我想通过jquery/ajax获取该值，而不更新整个页面。然后，我将在页面上的另一个php函数中使用该值，并列出该文件夹中找到的文件名。

我也有一个script.js文件。我至今是：

$(document).ready(function() { 
    $("#select-folder").change(function() { 
    // Get selected value and send to index.php 
    }); 
}); 

我是新来的jQuery和AJAX，所以我不太知道如何在不更新整个页面发送此值，或者如果它甚至有可能？也许我需要在index.php页面上包含JavaScript作为脚本标记？

更新增加新的代码

这是我的index.php文件，并努力获得的文件夹名称将其发送到file.php

<script> 
    $(document).ready(function() { 
     $("#select-folder").change(function() { 
     var value = $(this).val(); 
    console.log(value); 
    $.ajax({ 
    url: "/files.php", 
    data: "site=" + value, 
    type: 'POST', 
    success: function(var1, var2) { 
     console.log(var1 + var2); 
    } 
    }) 
    }); 
}); 
</script> 

然后，在file.php我得到文件夹名称并循环浏览文件夹内的所有文件。 但是，当这个代码I输出：

echo '<p>' . $file . '</p>'; 

它输出在控制台日志中，而不是在index.php

问题解决

我很多搜索，我要补充的后实现代码通过ajax转换为div，或者由于页面加载而不显示。

我加了这段代码的javascript的成功部分来自上面：

$('#show-files').html(var1); 

感谢大家的帮助。

Answer 1

例如。 我们有一个文件夹（树）结构：在你

./images 
    |--/foto1 
    |---- 1-1.jpg 
    |---- 1-2.jpg 
    |---- -13.jpg 
    |--/foto2 
    |---- 2-1.jpg 
    |---- 2-2.jpg 
    |---- 2-3.jpg 
./index.php 

选择指数/ foto1文件夹选择与价值 “图像/ foto1”

$(document).ready(function() { 
    $("#select-folder").change(function() { 
     var folderName = $(this).val(); // get a folder to display. 
     $.ajax(
      url: "index.php", 
      type: "POST", 
      data: {'folder':folderName}, 
      dataType: "json" 
      success: function(data){ 
       console && console.log(data); 
       // data variable will contains array of files 
       $("#result").html(''); 
       for(i=0,c=data.length;i<c;i++) 
        $("#result").append( data[i]+'<br>'); 
      } 
     ); 

    }); 
}); 

index.php文件包含下面的代码元素：

<?php 
$files = array(); 
if(isset($_POST['folder']) && file_exists($_POST['folder']) && is_dir($_POST['folder'])){ 
    if ($handle = opendir($_POST['folder'])) { 
     while (false !== ($entry = readdir($handle))) 
      array_push($files, $entry); 
    } 
} 
echo json_encode($files); 

此外，您还需要添加安全检查输入（目录检查）。 您可以使用此realpath(),dirname()和其他Filesystem functions。

Answer 2

$.post('/index.php', { selectedId: this.value }, function(resultHTML){ 
    $('#containerId').html(resultHTML); 
}); 

此代码发送选定的值来index.php页返回的HTML的一部分，我们把这个部分某处页上（在这种情况下在元件ID为数据筒）