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 ?

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