javascript - I'm trying to populate 2 drop down menus. The first with the categories of photos(folder name) and the 2nd

admin管理员组

文章数量:1394096

I am making a website for a FiveM server. One of my pages on my website is CityLife.php. It will have a photo gallery of thumbnail images that when clicked opens up to the full size image in another window. I also want to use filters on the gallery by means of drop-down menus. The first being categories which are populated with a separate PHP file that gets the folder names of the subdirectories inside of /Images/PhotoGalley/Thumbnails.

This populates the 1st drop down menu dynamically by the folder name and is working just fine.

CityLife.php

<div class="DDM1">                    
  <?php
  echo '<form method="post" action="DDM2.php">';
  echo "<label for= thumbnails>Categories:</label>";                
  include "DDM1.php";                
  ?>                
</form>

DDM1.php

<?php
// Define the path to the 'Thumbnails' folder
$directoryPath = 'Images/PhotoGallery/Thumbnails';

//Scan the directory and get all items
$items = scandir($directoryPath);

// Filter out the '.' and '..' entries and only keep directories
$subdirectories = array_filter($items, function($item) use ($directoryPath) {
  return is_dir($directoryPath . '/' . $item) && $item != '.' && $item != '..';
});

// Sort the subdirectories (optional, if you want them in a specific order)
sort($subdirectories);

// Output the dropdown menu
                
echo '<select name="thumbnails" id="thumbnails">';
                
foreach ($subdirectories as $subdirectory) {
  echo '<option value="' . htmlspecialchars($subdirectory) . '">' . htmlspecialchars($subdirectory) . '</option>';
}
echo '</select>';
?>

The problem comes when trying to populate the 2nd menu. I have this code to attempt to do that. Intially it uses JS and Ajax to transfer the value to variable $selected_category.

I then tried to use that variable as part of a filepath Images/PhotoGallery/Thumbnails/$selected_category as the $directorypath of another scandir() to get the sub-directories names in that category's folder. Using those name to populated the 2nd drop-down menu.

This is the code that I can't seem to figure out what I am doing wrong with after populating the first menu I use:

CityLife.php

<div class="DDM1">                    
  <?php
  echo '<form method="post" action="DDM2.php">';
  echo "<label for= thumbnails>Categories:</label>";                
  include "DDM1.php";                
  ?>                
  </form>

//endof 1 menu just shown for reference//               
<script src=".6.0.min.js"></script>

<script>
$(document).ready(function() {
  // When the user changes the select element
  $('#thumbnails').change(function() {
    var selectedCategory = $(this).val();  // Get the selected value

    // Send the value to DDM2.php using AJAX
    $.ajax({
      url: 'DDM2.php',             // The PHP page that will handle the data
      type: 'POST',                // Send a POST request
      data: { selected_category: selectedCategory }, // Send the selected value as 'selected_category'
      success: function(response) {
        // Handle the response from DDM2.php
        console.log(response);  // Print out the response from DDM2.php (if any)
      },
      error: function(xhr, status, error) {
        // Handle any errors
        console.error('AJAX request failed: ' + error);
      }
    });
  });
});
</script>

  </div>
</td>
<td>                
  <div><img src="Images/logo.png" alt="logo" width="100px" height="100px"></div>
</td>
<td >
  <divclass="DDM2'>
  <?php
  echo '<form method="post" action="photo_gallery.php">';
  echo '<label for="SubCategory">Sub Category</label>';
  include 'DDM2.php';
  ?>
  </form>   

DDM2.php

<?php
// Check if the form is submitted via POST and if 'selected_category' is set
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // Check if the selected_category is set and not empty
    if (isset($_POST['selected_category']) && !empty($_POST['selected_category'])) {
        $selected_category = $_POST['selected_category'];  // Get the value from the POST request
             
        // Define the path to the 'Thumbnails' folder
$directoryPath1 = 'Images/PhotoGallery/Thumbnails/$selected_category';

        // Scan the directory and get all items
        $items = scandir($directoryPath1);

        // Filter out the '.' and '..' entries and only keep directories
        $subdirectories = array_filter($items, function($item) use ($directoryPath1) {
          return is_dir($directoryPath1 . '/' . $item) && $item != '.' && $item != '..';
        });

        // Sort the subdirectories (optional, if you want them in a specific order)
        sort($subdirectories);

        // Output the dropdown menu
        echo '<select name="SubCategory" id="SubCategory">';
                
        foreach ($subdirectories as $subdirectory) {
            echo '<option value="' . htmlspecialchars($subdirectory) . '">' . htmlspecialchars($subdirectory) . '</option>';
        }
        echo '</select>';
    }
}
?> 

I have tried using my database which is mysql and my site is being hosted on a web hosting site with access to php enabled and a mysql database.

I hope this makes more sense to someone smarter than me and can show me where I am going wrong.

本文标签：