Показать имена файлов на основе того, что выбрано при выпадающем списке

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, так что я не знаю, как отправить это значение без обновления всей страницы или, если это возможно? Возможно, мне нужно включить javascript в качестве тега скрипта на странице index.php?

Обновлено добавить новый код

Это в моем файле 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 я получаю имя папки и цикл через все файлы внутри папки. Но когда я вывожу с этим кодом:

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

Он выводит в лог консоли, а не в index.php

Проблема решена

я понял, после долгих поисков, что я должен добавить код в div через ajax или он не будет отображаться из-за загрузки страниц.

Я добавил этот кусок кода для успеха части 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 и мы помещаем эту часть где-то на странице (в данном случае в элемент с идентификатором containerId)