Comment créer des listes déroulantes dynamiques en cascade à l'aide de jQuery et AJAX ?

Boîtes déroulantes dynamiques en cascade

Cet exemple montre la création d'une boîte déroulante dynamique qui remplit la deuxième boîte déroulante en fonction de la sélection de la première liste déroulante, comme requis.

Explication :

1. Première liste déroulante :

   • Contient options que l'utilisateur peut sélectionner.
   • Lorsque l'utilisateur sélectionne un élément, cela déclenche le changement event.

2. jQuery/AJAX :

   • L'événement change déclenche une requête AJAX vers un fichier PHP distinct (par ex. , update.php).
   • La valeur sélectionnée dans la première liste déroulante est envoyée avec le request.

3. update.php :

   • Reçoit la valeur sélectionnée dans la première liste déroulante.
   • Exécute une requête pour récupérer les options pertinentes pour la deuxième liste déroulante.
   • Formate les données dans JSON et le renvoie à l'appel AJAX.

4. Fonction de réussite AJAX :

   • Reçoit la réponse JSON et remplit la deuxième liste déroulante avec le correspondant options.

Exemple Code :

testeur.php:

<select name="gender"></select>

update.php:

if (!empty($_GET['id']) && !empty($_GET['value'])) {
    $id = $_GET['id'];
    $value = $_GET['value'];

    $sql = "SELECT * FROM `category` WHERE `master` = ?";
    $statement = $objDb->prepare($sql);
    $statement->execute(array($value));
    $list = $statement->fetchAll(PDO::FETCH_ASSOC);

    if (!empty($list)) {
        $out = array('<option value="">Select one</option>');

        foreach ($list as $row) {
            $out[] = '<option value="' . $row['id'] . '">' . $row['name'] . '</option>';
        }

        echo json_encode(array('error' => false, 'list' => implode('', $out)));
    } else {
        echo json_encode(array('error' => true));
    }
} else {
    echo json_encode(array('error' => true));
}

Mécanisme :

1. Lorsqu'un utilisateur sélectionne une option parmi la première liste déroulante, sa valeur est capturée.
2. Une requête AJAX est faite à update.php, portant la valeur sélectionnée.
3. update.php récupère les options appropriées pour la deuxième liste déroulante -down et les renvoie au format JSON.
4. La fonction de réussite AJAX met à jour les options sélectionnées dans la deuxième liste déroulante, ce qui en fait dynamique.

En suivant ces étapes, vous pouvez créer des listes déroulantes en cascade qui fournissent une interface conviviale et réactive pour la sélection des données.

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!