Maison >développement back-end >tutoriel php >Comment puis-je remplir dynamiquement une deuxième liste déroulante en fonction de la sélection dans une première liste déroulante à l'aide de jQuery et PHP ?

Comment puis-je remplir dynamiquement une deuxième liste déroulante en fonction de la sélection dans une première liste déroulante à l'aide de jQuery et PHP ?

Patricia Arquetteoriginal: 2024-12-23 08:18:16868parcourir

How can I dynamically populate a second drop-down box based on the selection in a first drop-down box using jQuery and PHP?

Remplir dynamiquement les boîtes déroulantes

Une technique populaire utilisée dans le développement Web consiste à créer des formulaires Web interactifs dans lesquels des boîtes déroulantes peuvent s'afficher. options qui dépendent de la valeur sélectionnée dans une liste déroulante précédente. Cette fonctionnalité est généralement obtenue à l'aide d'une combinaison de JavaScript (jQuery) et de scripts côté serveur (PHP).

Exemple d'explication du code

Dans ce scénario spécifique, vous êtes essayer de remplir la deuxième zone déroulante en fonction de la valeur sélectionnée dans la première zone déroulante. Le code fourni y parvient en suivant les étapes suivantes :

Capture de la sélection de l'utilisateur : lorsque l'utilisateur modifie la sélection dans la première liste déroulante, un gestionnaire d'événements jQuery est déclenché. Ce gestionnaire capture la valeur de l'option sélectionnée à l'aide de $(this).val().
Envoi d'une requête : grâce aux fonctionnalités AJAX de jQuery, une requête asynchrone est envoyée côté serveur Script PHP, another_php_file.php. Avec la requête, la valeur de l'option sélectionnée sel_stud est transmise sous forme de données.
Traitement côté serveur : Le script another_php_file.php reçoit les données publiées, effectue les requêtes de base de données nécessaires pour récupérer les données pertinentes spécifiques à l'option sélectionnée et assembler une réponse contenant un balisage HTML pour la deuxième liste déroulante mise à jour box.
Mise à jour de la liste déroulante : La réponse reçue du serveur est traitée par la fonction de gestionnaire de succès AJAX. Le balisage HTML de la deuxième liste déroulante est injecté dans le DOM à l'aide de $('#LaDIV').html(whatigot);.

Exemple personnalisé

Cet exemple de code illustre une implémentation personnalisée dans laquelle la première liste déroulante est utilisée pour sélectionner les noms des étudiants. Lors de la sélection, la deuxième liste déroulante affiche les cours correspondants enseignés par cet élève.

tester.php

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#stSelect').change(function() {
                var sel_stud = $(this).val();
                $.ajax({
                    type: "POST",
                    url: "another_php_file.php",
                    data: 'theOption=' + sel_stud,
                    success: function(whatigot) {
                        $('#LaDIV').html(whatigot);
                    }
                });
            });
        });
    </script>
</head>
<body>

    <select name="students">

another_php_file.php

<?php

    // Database Connection
    $server = 'localhost';
    $login = 'root';
    $pword = '';
    $dbname = 'test';
    mysql_connect($server,$login,$pword) or die($connect_error);
    mysql_select_db($dbname) or die($connect_error);

    // Get POST Data
    $selStudent = $_POST['theOption'];

    // Query Database
    $query = "SELECT * FROM `class` WHERE `teacher_id` = $selStudent";
    $result = mysql_query($query) or die('Fn Error: ' . mysql_error());
    $num_rows_returned = mysql_num_rows($result);

    // Build Response HTML
    $r = '
        <select>
    ';

    if ($num_rows_returned > 0) {
        while ($row = mysql_fetch_assoc($result)) {
            $r = $r . '<option value="' . $row['id'] . '">' . $row['name'] . '</option>';
        }
    } else {
        $r = '<p>No classes taught by this student</p>';
    }

    // Echo Response
    echo $r;
?>

Cette solution personnalisée adapte la deuxième zone déroulante pour afficher les cours en fonction de l'étudiant sélectionné, offrant ainsi une vue flexible et expérience de formulaire conviviale pour les listes déroulantes remplies dynamiquement.

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 function dom this display 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：Pourquoi est-ce que je reçois une erreur « Commandes désynchronisées » avec les instructions préparées MySQL en PHP ?Article suivant：Pourquoi est-ce que je reçois une erreur « Commandes désynchronisées » avec les instructions préparées MySQL en PHP ?

Articles Liés

Voir plus