Bonjour j'ai un soucis plutôt inhabituel. J'espère trouver des réponses auprès de vous.

J'ai réalisé un select dynamique avec php, JS, et bootstrap. D'après mon inspecteur la requête est OK et le retour l'est aussi mais la section prévu pour l'affichage du résultat reste vide avec pour message "nothing selected".

Un extrait de code

Le formulaire

 <div>  
 &lt;select id="diocese-dropdown" class="form-control"&gt;&lt;option value=""&gt;-- Votre Diocese --&lt;/option&gt;  
 @foreach ($dioceses as $data)  
 &lt;option value="{{$data-&amp;gt;id}}"&gt;  
  {{$data-&gt;Nom_Diocese}}  
                &lt;/option&gt;  
 @endforeach &lt;/select&gt;</div></div>  
  
<div>  
 <div>  
 &lt;select id="region-dropdown" class="form-control" /&gt;</div></div>  
<div>  
 <div>  
 &lt;select id="section-dropdown" class="form-control" /&gt;</div>
 </div>

<script>  
  $(document).ready(function () {  
        $("#diocese-dropdown").on('change',function () {  
            var dioc = this.value;  
  $("#region-dropdown").html('');  
  $.ajax({  
                url: "{{url('api/fetch-regions')}}",  
  type: "POST",  
  data: {  
                    diocese_id: dioc,  
  _token: "{{csrf_token()}}"  
  },  
  dataType:'json',  
  success:function (resultat){  
                $("#region-dropdown").html('<option value="">-- Select State --');  
  $.each(resultat.regions, function (key, value){  
                    $("#region-dropdown").append('<option value="' + value.id + '">' + value.Nom_Region + '' );  
  });  
  $("#section-dropdown").html('<option value="">-- Select City --');  
  }  
            });  
  });  
  
  
  $("#region-dropdown").on('change', function () {  
            var reg = this.value;  
  $("#section-dropdown").html('');  
  $.ajax({  
                url: "{{url('api/fetch-sections')}}",  
  type: "POST",  
  data: {  
                    region_id: reg,  
  _token: "{{csrf_token()}}"  
  },  
  dataType: 'json',  
  success: function (res) {  
                    $("#section-dropdown").html('<option value="">-- Select City --');  
  $.each(res.sections, function (key, value) {  
                        $("#section-dropdown").append('<option value="' + value.id + '">' + value.Nom_Section + '');  
  });  
  }  
            });  
  });  
  })  
</script>

Bonjour, Évitez les titres de sujet avec "problème" si vous postez on se doute que vous avez un problème inutile de l'indiquer dans le titre cela n'apporte rien comme information supplémentaire quand au contenu du sujet. 

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: jscript;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

Liens conseillés

• Charte de bonne conduite
• Règles générales du forum

Voici les extraits de code.

Le formulaire

<div class="form-row">
                            <div class="form-group col-md-12">
                                <select  id="diocese-dropdown" class="form-control">
                                    <option value="">-- Votre Diocese --</option>
                                    @foreach ($dioceses as $data)
                                        <option value="{{$data->id}}">
                                            {{$data->Nom_Diocese}}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <select id="region-dropdown" class="form-control">
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <select id="section-dropdown" class="form-control">
                                </select>
                            </div>
                        </div>

Le JS

<script>
    $(document).ready(function () {
        $("#diocese-dropdown").on('change',function () {
            var dioc = this.value;
            $("#region-dropdown").html('');
            $.ajax({
                url: "{{url('api/fetch-regions')}}",
                type: "POST",
                data: {
                    diocese_id: dioc,
                    _token: "{{csrf_token()}}"
            },
            dataType:'json',
            success:function (resultat){
                $("#region-dropdown").html('<option value="">-- Select State --</option>');
                $.each(resultat.regions, function (key, value){
                    $("#region-dropdown").append('<option value="' + value.id + '">' + value.Nom_Region + '</option>' );
                });
                $("#section-dropdown").html('<option value="">-- Select City --</option>');
                }
            });
        });


        $("#region-dropdown").on('change', function () {
            var reg = this.value;
            $("#section-dropdown").html('');
            $.ajax({
                url: "{{url('api/fetch-sections')}}",
                type: "POST",
                data: {
                    region_id: reg,
                    _token: "{{csrf_token()}}"
                },
                dataType: 'json',
                success: function (res) {
                    $("#section-dropdown").html('<option value="">-- Select City --</option>');
                    $.each(res.sections, function (key, value) {
                        $("#section-dropdown").append('<option value="' + value.id + '">' + value.Nom_Section + '</option>');
                    });
                }
            });
        });
    })
</script>

Le réponse du seveur en JSON

{"regions":[
{"Nom_Region":"P\u00e8res Raymond Halter et Bernard Gouel","id":1},
{"Nom_Region":"Mgr Laurent YAPI","id":2},
{"Nom_Region":"Joseph Garnier et Pascal Acafou Grah","id":3},
{"Nom_Region":"P\u00e8re Pierre Michel PANGO","id":4},{"Nom_Region":"Jean Baptiste Tilo","id":5},
{"Nom_Region":"Jacques Nomel et Blaise Anoh","id":6},
{"Nom_Region":"Ren\u00e9 N'Guio et Joseph Brou","id":7},
{"Nom_Region":"Nicolas Obo et Macaire Danho","id":8},
{"Nom_Region":"Mgr Albert ABLE et P\u00e8re Neuvry","id":9},
{"Nom_Region":"Mgr Joseph Akichi et R\u00e9gis PEILLON","id":10}
]}

Merci

Salut, 

Du coup c'est sur quelle requête ajax que tu n'a pas le résultat escompté ?

J'ai testé sur jsfiddle (https://jsfiddle.net/davinquito/1um8Lqy3/2/) en utilisant ton json comme résultat de requête ajax et ça semble fonctionner normalement pour ce champ-ci. 

Salut @hippomssc, dans mon cas le champ du formulaire avec l'id region-dropdown reste vide quel que soit le contenu du champ précédent.

C'est vraiment embêtant parce que tout semble fonctionner. Et j'ai pas d'erreur.

Salut, j'ai vu résoudre le problème.

J'avais ce message parce que bootstrap-select ne rafraichit pas automatiquement le contenu des champs.

Merci encore