根據所選內容在下拉列表中顯示文件名

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爲數據筒）