How to Populate a Dependent Dropdown Using jQuery, AJAX, PHP, and MySQL?

Populating Second Dropdown Based on First Dropdown Selection Using jQuery/AJAX and PHP/MySQL

Developing dynamic dropdown menus allows users to interact with forms more easily. This article demonstrates how to populate the second dropdown based on the selection made in the first dropdown using jQuery/AJAX and PHP/MySQL.

The HTML code creates two dropdown lists, with the first one populated on page load. The second dropdown should display options based on the selection made in the first dropdown.

The PHP code queries the database to generate a JSON object containing the values for the second dropdown. The JSON object is then passed to the jQuery/AJAX request.

$(function() {

  $("#item_1").change(function() {

    var group_id = $(this).val();

    $.ajax({
      type: "POST",
      url: "../../db/groups.php?item_1_id=" + group_id,
      dataType: "json",
      success: function(data) {
        // Clear options corresponding to earlier option of first dropdown
        $('select#item_2').empty();
        $('select#item_2').append('<option value="0">Select Option</option>');
        // Populate options of the second dropdown
        $.each(data.subjects, function(i, val) {
          $('select#item_2').append('<option value="' + val.id + '">' + val.name + '</option>');
        });
        $('select#item_2').focus();
      },
      beforeSend: function() {
        $('select#item_2').empty();
        $('select#item_2').append('<option value="0">Loading...</option>');
      },
      error: function() {
        $('select#item_2').attr('disabled', true);
        $('select#item_2').empty();
        $('select#item_2').append('<option value="0">No Options</option>');
      }
    });

  });
});

Note that the JSON result should be formatted as follows:

[{"name":"A","id":"0"},{"name":"B","id":"1"},{"name":"C","id":"2"}]

Once the JSON object is received and parsed in JavaScript, the options are dynamically appended to the second dropdown. This provides a user-friendly way to narrow down options based on previous selections.

The above is the detailed content of How to Populate a Dependent Dropdown Using jQuery, AJAX, PHP, and MySQL?. For more information, please follow other related articles on the PHP Chinese website!