What are the best practices for creating dependent drop-down menus in PHP?

When creating dependent drop-down menus in PHP, it is essential to use AJAX to dynamically populate the options in the second drop-down based on the selection in the first drop-down. This requires creating an event listener in JavaScript to detect changes in the first drop-down and sending an AJAX request to fetch the appropriate data from the server. 

// HTML for the first drop-down menu
<select id="first-dropdown">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

// HTML for the second drop-down menu
<select id="second-dropdown"></select>

// JavaScript to handle AJAX request
<script>
document.getElementById('first-dropdown').addEventListener('change', function() {
  var selectedOption = this.value;
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'get_options.php?option=' + selectedOption, true);
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 400) {
      var data = JSON.parse(xhr.responseText);
      var secondDropdown = document.getElementById('second-dropdown');
      secondDropdown.innerHTML = '';
      data.forEach(function(option) {
        var optionElement = document.createElement('option');
        optionElement.value = option.id;
        optionElement.textContent = option.name;
        secondDropdown.appendChild(optionElement);
      });
    }
  };
  xhr.send();
});
</script>

// PHP code in get_options.php to fetch data based on selected option
<?php
$selectedOption = $_GET['option'];

// Perform database query or any other logic to fetch options based on selectedOption
$options = [
  ['id' => 1, 'name' => 'Option A'],
  ['id' => 2, 'name' => 'Option B'],
];

header('Content-Type: application/json');
echo json_encode($options);
?>

Keywords

PHP dependent drop-down menus AJAX JSON dynamic data.

Related Questions