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 ?-tutoriel php-php.cn

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 Arquette

Libérer： 2024-12-23 08:18:16

original

867 Les gens l'ont consulté

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">

Copier après la connexion

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;
?>

Copier après la connexion

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!