Comment créer un menu déroulant en cascade avec un deuxième menu à remplissage automatique ?

Menu déroulant en cascade : deuxième menu à remplissage automatique basé sur la première sélection

Dans ce scénario, nous souhaitons créer deux menus déroulants interconnectés, où les options du deuxième menu changent dynamiquement en fonction de la sélection effectuée dans le premier menu.

Structure HTML initiale :

<code class="html"><select name="category">
    <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 name="items">
    <!-- Options will be populated dynamically -->
</select></code>

Gestion des événements :

Pour obtenir la fonctionnalité souhaitée, nous utiliserons un écouteur d'événement dans la première liste déroulante pour déclencher un appel Ajax lorsque la sélection change.

<code class="javascript"><script type="text/javascript">
    function changeItems(categoryId) {
        $.ajax({
            url: 'process.php?category=' + categoryId,
            success: function(data) {
                $("#items").html(data);
            }
        });
    }
</script></code>

Gérer l'Ajax Requête :

Dans le fichier process.php, nous construirons les options de la deuxième liste déroulante en fonction de la catégorie sélectionnée.

<code class="php">$categoryId = $_GET['category'];

switch ($categoryId) {
    case 1:
        $options = array(
            'Smartphone', 'Charger'
        );
        break;
    case 2:
        $options = array(
            'Basketball', 'Volleyball'
        );
        break;
    // ...
}

foreach ($options as $option) {
    echo "<option value='$option'>$option</option>";
}</code>

Mise à jour dynamique de la deuxième liste déroulante :

L'appel Ajax remplit l'élément #items avec les nouvelles options générées dans process.php.

<code class="javascript">$("#items").html(data);</code>

Implémentation personnalisée sans base de données :

Si vous n'avez pas de base de données, vous pouvez définir manuellement les options pour chaque catégorie dans un tableau et mettre à jour la deuxième liste déroulante via JavaScript.

<code class="javascript">// Define options for each category
const categories = ['First', 'Second', 'Third', 'Fourth'];
const optionArrays = [
    ['Smartphone', 'Charger'],
    ['Basketball', 'Volleyball'],
    // ...
];

// Update second dropdown on category change
$(document).on('change', 'select[name="category"]', function() {
    const selectedCategory = $(this).val();
    const options = optionArrays[selectedCategory - 1]; // Subtract 1 to match array indices

    $('#items').empty();
    for (let i = 0; i < options.length; i++) {
        $('#items').append(`<option value="${options[i]}">${options[i]}</option>`);
    }
});</code>

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!