Comment créer des listes déroulantes en cascade sans base de données ?

Sélection de listes déroulantes en cascade sans base de données

Problème :

Dans un formulaire, vous avez besoin de deux listes déroulantes, où les options de la deuxième liste déroulante dépend de la sélection dans la première liste déroulante, le tout sans utiliser de base de données.

Solution :

Malgré la méthode de base de données, voici comment y parvenir sans utiliser un :

Marquage HTML :

<code class="html"><select id="primary-dropdown">
    <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>
</select>

<select id="secondary-dropdown">
    <option value="0" selected>None</option>
</select></code>

JavaScript/jQuery :

<code class="javascript">$(document).ready(function() {
    var options = {
        1: ["Smartphone", "Charger"],
        2: ["Basketball", "Volleyball"],
        3: ["Apple", "Orange"],
        4: ["Dog", "Cat"]
    };

    $("#primary-dropdown").on("change", function() {
        var selected = $(this).val();
        $("#secondary-dropdown").empty();
        $.each(options[selected], function(i, option) {
            $("#secondary-dropdown").append("<option value='" + (i + 1) + "'>" + option + "</option>");
        });
    });
});</code>

Explication :

• Nous définissons un objet appelé options pour contenir les associations entre les valeurs déroulantes principales et leurs options déroulantes secondaires correspondantes.
• Lorsque la valeur déroulante principale change, nous vidons le liste déroulante secondaire et parcourez l'objet d'options.
• Pour la valeur de la liste déroulante principale sélectionnée, nous ajoutons les options correspondantes à la liste déroulante secondaire.

Cette solution vous permet de créer des listes déroulantes en cascade sans s'appuyant sur une base de 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!