communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > développement back-end > tutoriel php > Comment implémenter des options de changement automatique dans le deuxième menu déroulant en fonction de la première sélection déroulante ?

Comment implémenter des options de changement automatique dans le deuxième menu déroulant en fonction de la première sélection déroulante ?

DDD
Libérer： 2024-10-21 06:45:02
original
965 Les gens l'ont consulté

How to Implement Auto-changing Options in Second Dropdown Menu Based on First Dropdown Selection?

Options à changement automatique dans le deuxième menu déroulant en fonction de la première sélection déroulante

Lors de la création de plusieurs menus déroulants où les options du second menu dépendent de la sélection effectuée dans le premier menu, il est possible d'y parvenir sans s'appuyer sur une base de données.

Configuration initiale

Le premier menu déroulant afficher une liste de catégories, tandis que la deuxième liste déroulante affichera les éléments associés à la catégorie sélectionnée.

Première liste déroulante :

<select name="category"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><option value="0">None</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
Copier après la connexion


Deuxième liste déroulante :

<select name="items"><br></select><br>

Options dynamiques dans la deuxième liste déroulante

Pour mettre à jour les options de la deuxième liste déroulante en fonction de la sélection dans la première liste déroulante, nous avons besoin d'une fonction AJAX qui envoie la catégorie sélectionnée à un script PHP.

Fonction AJAX :

<script type="text/javascript"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function ajaxfunction(parent)
{
    $.ajax({
        url: 'process.php?parent=' + parent;
        success: function(data) {
            $("#sub").html(data);
        }
    });
}
Copier après la connexion


Cette fonction est attachée à l'événement onchange de la première liste déroulante.

Dans le HTML, placez un autre élément select avec un identifiant "sub" pour afficher les options générées dynamiquement.

<select onchange="ajaxfunction(this.value)"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!-- Options would have been initially populated here -->
Copier après la connexion