Wie fülle ich ein abhängiges Dropdown-Menü mit jQuery, AJAX, PHP und MySQL?

Auffüllen des zweiten Dropdown-Menüs basierend auf der ersten Dropdown-Auswahl mit jQuery/AJAX und PHP/MySQL

Die Entwicklung dynamischer Dropdown-Menüs ermöglicht Benutzern die Interaktion mit Formularen einfacher. In diesem Artikel wird gezeigt, wie Sie das zweite Dropdown-Menü basierend auf der im ersten Dropdown-Menü getroffenen Auswahl mit jQuery/AJAX und PHP/MySQL füllen.

Der HTML-Code erstellt zwei Dropdown-Listen, wobei die erste beim Laden der Seite gefüllt wird. Das zweite Dropdown-Menü sollte Optionen basierend auf der im ersten Dropdown-Menü getroffenen Auswahl anzeigen.

Der PHP-Code fragt die Datenbank ab, um ein JSON-Objekt zu generieren, das die Werte für das zweite Dropdown-Menü enthält. Das JSON-Objekt wird dann an die jQuery/AJAX-Anfrage übergeben.

$(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>');
      }
    });

  });
});

Beachten Sie, dass das JSON-Ergebnis wie folgt formatiert sein sollte:

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

Sobald das JSON-Objekt empfangen und analysiert wurde In JavaScript werden die Optionen dynamisch an das zweite Dropdown-Menü angehängt. Dies bietet eine benutzerfreundliche Möglichkeit, Optionen basierend auf vorherigen Auswahlen einzugrenzen.

Das obige ist der detaillierte Inhalt vonWie fülle ich ein abhängiges Dropdown-Menü mit jQuery, AJAX, PHP und MySQL?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!