Bonjour à vous , pour aller droit au but,le problème est le suivant :

-j'ai 2 champs select "category" et "fabricant", le second dépend du premier .Sa liste d'option n'étant pas la même en fonction de la catégorie choisie.

-Requête ajax onchange :ok, Retour json: ok ; Boucle :ok  . Mais la liste d'option retourner ne s'affiche pas sur le second select(fabricant): liste vierge. Mais en "inspectant l'élément" , je vois bel et bien la liste d'option se charger coté HTML , et pourtant elle n'est pas rendu visuellement (sur tous les navigateur).

$('select#firstSelect').on("change", function(e) {

                e.preventDefault();

                var item= $( "select#firstSelect option:selected" ).val();
                const uri = $(this).data('uri');

                $.ajaxSetup({
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
                });

               $.ajax({
                    type: 'get',
                    url: uri,
                    data: {'item':item},
                    dataType: 'json' ,
                    success: function(resp) {

                        let select =  $('select#secondSelect');
                          select.empty();
                          badge.empty();

                        var options = '';

                        $.each(resp,
                            function(key,value) {
                                options += '<option value="' + value.brand_id + '">' + value.name + '</option>';
                            });

                       select.html(options);

                    },
                
                });


            });

 

PS:Je cherche depuis longtemps ,j'ai pas trouvé de problème similaire sur le net

-
Edité par YannDeo 10 décembre 2018 à 16:25:02

Salut !

Tu utilises un JavaScript quelconque pour l'affichage de tes listes de choix ? Si c'est le cas, à mon avis il faut notifier le script qu'il y a eu mise à jour du HTML afin que la liste stylisée reflète les changements.

Salut Ymox , tout le code est là ... tu pourrais être un peu plus clair svp...

Ton select ne s'affiche pas avec une interface native, du moins pas que je connaisse. Donc il y a du JavaScript qui se charge de changer cet affichage, j'imagine. Or, ce JavaScript n'est probablement exécuté qu'une seule fois. Il faut donc lui dire qu'il y a eu changement, sans quoi tu vas effectivement rester avec les options originelles dans ton affichage.

D'accord ton raisonnement à l'air logique . Du coup comment je fais savoir à ma balise select html(le second je suppose) qu'il y'a eu un changement d'état .Comment ça se fait?. T'aurais un bout de code ou une capture pour visualiser le truc stp?.

Si tu ne peux pas me dire quel JavaScript est utilisé pour mettre en forme ta liste de choix, je ne pourrais pas aller chercher dans la documentation pour toi…

 "Quel JavaScript est utilisé" ???? , si tu parle de la version , j'utilise jquery-1.12.4.min.js .La mise en forme est presenté comme ceci

                            
                            <div class="col-lg-6 col-md-7 col-sm-7 col-xs-5">

                                <div class="bootstrap-select fm-cmp-mg show">
                                  
                                    <select class="selectpicker" name="secondSelect" id="secondSelect">
                                    </select>

                                </div>
                            </div>
                           
                    

le script requête Ajax est présent dans le tout premier message .

Après quelques recherches : je peux conclure que la version javascript supportée est 1.5.

-
Edité par YannDeo 10 décembre 2018 à 18:29:16

Ce que je voulais savoir est probablement dans ce code : tu utilises apparemment Bootstrap select. Au temps pour moi, j'aurais dû préciser librairie JavaScript.

Apparemment, en passant 'refresh' à la méthode selectpicker(), effectuer cela effectue la mise à jour. A toi donc d'appeler cette méthode quelque part comme à la ligne 31.

-
Edité par Ymox 10 décembre 2018 à 20:55:11

ohh God!! et dire que j'y ai passé beaucoup beaucoup d'heures dessus.C'était vraiment bien vu de ta part Ymox. La librairie bootstrap-select et son selectpicker() à besoin du "refresh" après le .html.

$("select#secondSelect").selectpicker('refresh');

un autre Topic en parle .Grand merci à toi .

https://stackoverflow.com/questions/34469232/select-does-not-work-after-inserting-options-with-html-after-ajax-call-bootst