What is the common approach to dynamically populating a second SELECT field based on the selection in the first SELECT field using PHP?

When dynamically populating a second SELECT field based on the selection in the first SELECT field using PHP, a common approach is to use AJAX to fetch the data from the server based on the selected value in the first field. This involves creating an event listener on the first SELECT field to trigger an AJAX request to fetch the data for the second SELECT field and then updating the options in the second SELECT field based on the response. 

// HTML code for the first and second SELECT fields
<select id="firstSelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

<select id="secondSelect">
</select>

// JavaScript code to handle the AJAX request
<script>
document.getElementById('firstSelect').addEventListener('change', function() {
  var selectedValue = this.value;
  
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'getOptions.php?selectedValue=' + selectedValue, true);
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 400) {
      var response = JSON.parse(xhr.responseText);
      var secondSelect = document.getElementById('secondSelect');
      secondSelect.innerHTML = '';
      response.forEach(function(option) {
        var optionElem = document.createElement('option');
        optionElem.value = option.value;
        optionElem.text = option.text;
        secondSelect.appendChild(optionElem);
      });
    }
  };
  xhr.send();
});
</script>

// PHP code in getOptions.php to fetch data based on selected value
<?php
$selectedValue = $_GET['selectedValue'];

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

echo json_encode($options);
?>

Keywords

PHP dynamic populate SELECT field onchange event

Related Questions