How can you make the content of a second dropdown dependent on the value selected in the first dropdown using PHP?

To make the content of a second dropdown dependent on the value selected in the first dropdown using PHP, you can use AJAX to dynamically load the options for the second dropdown based on the selected value of the first dropdown. When the value in the first dropdown changes, an AJAX request is sent to the server to fetch the corresponding options for the second dropdown.

<!-- HTML -->
<select id="first_dropdown">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

<select id="second_dropdown">
  <!-- Options will be dynamically loaded here -->
</select>

<!-- JavaScript -->
<script>
  document.getElementById('first_dropdown').addEventListener('change', function() {
    var selectedValue = this.value;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'get_options.php?selected_value=' + selectedValue, true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        document.getElementById('second_dropdown').innerHTML = xhr.responseText;
      }
    };
    xhr.send();
  });
</script>

<!-- PHP (get_options.php) -->
<?php
$selectedValue = $_GET['selected_value'];

// Query database or perform any other logic to get options based on selected value
$options = ['Option A', 'Option B', 'Option C'];

foreach ($options as $option) {
  echo "<option value='$option'>$option</option>";
}
?>