Wie erstelle ich dynamische abhängige Dropdowns mit jQuery, AJAX, PHP und MySQL?

Dynamische Dropdowns mit jQuery/AJAX und PHP/MySQL

Problem:

Konstruieren eines Satz dynamischer Dropdown-Boxen mit jQuery/AJAX und PHP/MySQL, wobei die Optionen des zweiten Dropdowns von der Auswahl im ersten Dropdown abhängen.

JSON-Abfrage:

Die bereitgestellten Die JSON-Abfrage zum Generieren der Werte des zweiten Dropdown-Menüs funktioniert ordnungsgemäß. Es gibt jedoch Probleme beim Auffüllen der Optionen in das Dropdown-Formularelement.

Javascript:

Der Hauptfehler liegt im Ereignishandler für das erste Dropdown. Der geänderte Code sollte wie folgt aussehen:

$().ready(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 previous options
                $('select#item_2').empty();
                $('select#item_2').append('<option value="0">Select Option</option>');

                // Populate options from JSON
                $.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>');
            }
        });
    });
});

HTML:

Der bereitgestellte HTML-Code scheint korrekt zu sein.

PHP:

Der PHP-Code zum Abrufen der JSON-Daten ist ebenfalls korrekt.

Beispiel-JSON-Ausgabe:

Die bereitgestellte Beispiel-JSON-Ausgabe ist gültig und wird es auch sein vom jQuery-Code korrekt analysiert.

Das obige ist der detaillierte Inhalt vonWie erstelle ich dynamische abhängige Dropdowns mit jQuery, AJAX, PHP und MySQL?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!