Heim > Datenbank > MySQL-Tutorial > Wie erstelle ich dynamische abhängige Dropdowns mit jQuery, AJAX, PHP und MySQL?

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

Barbara Streisand
Freigeben: 2024-11-17 16:54:02
Original
284 Leute haben es durchsucht

How to Create Dynamic Dependent Dropdowns Using jQuery, AJAX, PHP, and 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>');
            }
        });
    });
});
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage