recherche

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
DDDoriginal
2024-10-21 06:45:02986parcourir

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


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>
<pre class="brush:php;toolbar:false">function ajaxfunction(parent)
{
    $.ajax({
        url: 'process.php?parent=' + parent;
        success: function(data) {
            $("#sub").html(data);
        }
    });
}


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>
<pre class="brush:php;toolbar:false"><!-- Options would have been initially populated here -->