[Résolu] Remplir un dropdown en fonction choix autre dropdown

Bonjour,
J'ai un formulaire avec deux select

Le premier pour les zones et le second pour les sous zones

En fonction du choix de la zone j'ai les sous zones correspondantes

Le programme fonctionne (console.log me donne bien les valeurs) mais je n'arrive pas à alimenter les sous zones

Mon code

<div class="container container-center margin"> 
    <h3 class="text-center">Bienvenue <b><?=$user_items->pseudo?> </b> sur votre espace administrateur</h3>
    <div class="card card-default card-body text-center">
        <form class="form-inlin justify-content-center" id="form_search" name="form_search" action="/fr/BO/Plantzones/show" method="post" >      
            <fieldset >
                <legend >Faites une Recherche</legend> 
                <div class="form-group ">
                    <div class="col-xs-2">
                        <input class="form-control form-control-sm" type="text" name="request" id="request" >
                    </div>
                </div>
                <button type="submit" class="btn btn-primary mb-2">Rechercher</button>
            </fieldset>
        </form>
        
        <form class="form-inlin justify-content-center" method="post" action="/fr/BO/Plantzones/show">
            <fieldset>
                <legend>Choix de la zone</legend>
                <select class="form-control form-control-sm custom-select" name="plantzone_id" id="plantzone_id" onchange="updateSubzones()"><option value="">Sélectionnez une zone</option>
                    <?php foreach($plantzones as $plantzone): ?>
                            <option value="<?=$plantzone->id;?>"><?=$plantzone->zonename;?>/<?=$plantzone->description;?></option>
                    <?php endforeach; ?> 
                </select>
            </fieldset>    
            <fieldset>
                <legend>Choix de la sous zone</legend>
                <div class="form-group">
                    <select class="form-control form-control-sm custom-select" name="plantsubzone_id" id="plantsubzone_id" placeholer="Sélectionnez d'abord une zone"><option value="">Sélectionnez une sous zone</option>
                        
                    </select>
                </div>
                <button type="submit" class="btn btn-primary">Selectionner</button>
            </fieldset> 
        </form>
    </div>
</div> 

<script>
        function updateSubzones() {

            var zoneSelect = document.getElementById('plantzone_id'); 
            var subzoneSelect = document.getElementById('plantsubzone_id');

            // Récupérer la valeur sélectionnée dans le premier select
            var selectedZoneId = zoneSelect.value; //alert(selectedZoneId);
            // Vider le deuxième select
            //subzoneSelect.innerHTML = '<option value="">Sélectionnez d\'abord une zone</option>';
            subzoneSelect.innerHTML = '';

            // Si une zone est sélectionnée, remplir le deuxième select avec les sous-zones correspondantes
            if (selectedZoneId) {
                // Effectuer une requête AJAX pour récupérer les sous-zones
                $.ajax({
                    url: '/fr/BO/Plantzones/BySubZone',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        zoneId: selectedZoneId
                    },
                    success: function(subzones) {
                        $.each(subzones, function(index, subzone) {
                            console.log(subzone.subzonename + " " +subzone.description );

                            subzoneSelect.append('<option value="' + subzone.subzonename + '">' + subzone.description + '</option>');

                            /*subzoneSelect.append($('<option>', {
                                value: subzone.id,
                                text: subzone.subzonename
                            }));*/
                        });
                    },
                    error: function() {
                        console.error("Erreur lors de la récupération des sous-zones.");
                    }
                });
               
            }
        }//Fin Fonction
    </script>   
        

Merci d'avance pour votre aide
Modifié par dudu22 (18 Dec 2023 - 14:13)

Salut,

Il faut utiliser add() et non append()
La doc : https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/add

Bon code !

Merci Laurent pour ton aide mais j'ai modifié mon script et cela marche

<script>
        function updateSubzones() {

             var zoneSelect = $('#plantzone_id');
            var subzoneSelect = $('#plantsubzone_id');

            // Récupérer la valeur sélectionnée dans le premier select
          
            var selectedZoneId = zoneSelect.val();
            // Vider le deuxième select
            // La méthode .empty() supprimera tous les enfants d'un élément
            subzoneSelect.empty().append('<option value="">Sélectionnez d\'abord une zone</option>');

            // Si une zone est sélectionnée, remplir le deuxième select avec les sous-zones correspondantes
            if (selectedZoneId) {
                // Effectuer une requête AJAX pour récupérer les sous-zones
                $.ajax({
                    url: '/fr/BO/Plantzones/BySubZone',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        zoneId: selectedZoneId
                    },
                    success: function(subzones) {
                        $.each(subzones, function(index, subzone) {
                            
                            subzoneSelect.append($('<option>', {
                                value: subzone.id,
                                text: subzone.subzonename + " " + subzone.description
                            }));
                    });
                    },
                    error: function() {
                        console.error("Erreur lors de la récupération des sous-zones.");
                    }
                });
            }
        }//Fin Fonction
    </script>