Maison > base de données > tutoriel mysql > Comment créer des listes déroulantes dépendantes dynamiques à l'aide de jQuery, AJAX, PHP et MySQL ?

Comment créer des listes déroulantes dépendantes dynamiques à l'aide de jQuery, AJAX, PHP et MySQL ?

Barbara Streisand
Libérer: 2024-11-17 16:54:02
original
284 Les gens l'ont consulté

How to Create Dynamic Dependent Dropdowns Using jQuery, AJAX, PHP, and MySQL?

Liste déroulante dynamique avec jQuery/AJAX et PHP/MySQL

Problème :

Construire un ensemble de listes déroulantes dynamiques utilisant jQuery/AJAX et PHP/MySQL où se trouve la deuxième liste déroulante les options dépendent de la sélection dans la première liste déroulante.

Requête JSON :

La requête JSON fournie pour générer les valeurs de la deuxième liste déroulante fonctionne correctement. Cependant, des problèmes surviennent lors du remplissage des options dans l'élément de formulaire déroulant.

Javascript :

L'erreur principale réside dans le gestionnaire d'événements de la première liste déroulante. Le code modifié doit ressembler à :

$().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>');
            }
        });
    });
});
Copier après la connexion

HTML :

Le code HTML fourni semble correct.

PHP :

Le code PHP pour récupérer les données JSON est également correct.

Exemple de sortie JSON :

L'exemple de sortie JSON fourni est valide et sera analysé correctement par le code jQuery.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal