Maison >développement back-end >tutoriel php >Comment remplir une liste déroulante dépendante à l'aide d'AJAX et PHP ?

Comment remplir une liste déroulante dépendante à l'aide d'AJAX et PHP ?

Mary-Kate Olsenoriginal: 2024-12-12 14:46:15375parcourir

How to Populate a Dependent Dropdown Box Using AJAX and PHP?

Comment puis-je remplir une liste déroulante dynamique en fonction de la sélection d'une autre liste déroulante ?

J'ai une table de base de données appelée catégorie comme indiqué ci-dessous :

[Image d'une table de base de données nommée "category" avec les colonnes "id", "name" et "master"]

J'essaie de faire une dynamique dans la liste déroulante et le script d'index s'affiche comme :

[Échantillon de code du script d'index]

Le update.php s'affiche comme :

[Échantillon de code du update.php]

La 2ème liste déroulante n'affiche pas les valeurs dépendant de la 1ère liste déroulante, comme indiqué :

[Image de un formulaire avec deux listes déroulantes. La première liste déroulante propose des options pour « Sélectionner un », « Catégorie 1 » et « Catégorie 2 ». La deuxième liste déroulante n'a que l'option "----".]

Quelqu'un peut-il m'aider s'il vous plaît.

Réponse :

À créez une liste déroulante dynamique où les options de la deuxième case dépendent de la sélection dans la première case, vous pouvez utiliser ce qui suit approche :

Gérer l'événement de changement de la première liste déroulante : À l'aide de jQuery, ajoutez un écouteur d'événement de changement à la première liste déroulante. Lorsque la valeur de la première liste déroulante change, cet événement sera déclenché.
Envoyer une requête AJAX : Dans le gestionnaire d'événements, effectuez une requête AJAX vers un fichier PHP (par exemple, update.php) qui renverra les options de la deuxième liste déroulante en fonction de la valeur sélectionnée dans la première liste déroulante.
Gérer le Réponse AJAX : Dans le rappel de réussite de la requête AJAX, analysez les données de réponse, qui contiendront le code HTML des options à ajouter à la deuxième liste déroulante.
Mettez à jour le deuxième liste déroulante : Utilisez JavaScript pour mettre à jour le code HTML de la deuxième liste déroulante avec les options générées à partir des données de réponse.
Activer la deuxième liste déroulante :Une fois les options mises à jour, activez la deuxième liste déroulante pour la sélection de l'utilisateur.

Voici un exemple qui démontre cela approche :

tester.php:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            $('#first_dropdown').change(function() {
                var value = $(this).val();
                $.ajax({
                    url: 'update.php',
                    method: 'POST',
                    data: { value: value },
                    success: function(response) {
                        $('#second_dropdown').html(response);
                        $('#second_dropdown').prop('disabled', false);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <select>

update.php:

<?php
if (isset($_POST['value'])) {
    $selectedValue = $_POST['value'];
    $data = array();

    // Here you would typically query your database to retrieve options based on the selected value.
    if ($selectedValue == 'category1') {
        $data[] = '<option value="option1">Option 1</option>';
        $data[] = '<option value="option2">Option 2</option>';
    } elseif ($selectedValue == 'category2') {
        $data[] = '<option value="option3">Option 3</option>';
        $data[] = '<option value="option4">Option 4</option>';
    }

    echo implode('', $data);
}
?>

En suivant cette approche , vous pouvez créer des listes déroulantes dynamiques à plusieurs niveaux où les options de chaque liste déroulante dépendent de la sélection effectuée dans la liste déroulante précédente.

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!

php JavaScript jquery ajax html for select using Event this table database

Déclaration：

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

Article précédent：Communiqué Symfony Station — Décembre Un regard sur Symfony, Drupal, PHP et autres actualités en matière de programmation !Article suivant：Communiqué Symfony Station — Décembre Un regard sur Symfony, Drupal, PHP et autres actualités en matière de programmation !

Articles Liés

Voir plus