Hello,

Je me retourne vers vous car je ne trouve pas de solution pour un petit problème en jQuery et json.
Je dois faire un formulaire dynamique, pour des devis. Lorsque l'utilisateur choisi la catégorie du produit qu'il veut le devis, le select d'après charge automatiquement les modeles de sa catégorie.

Les requêtes sont envoyés avec .getJSON(); de cette façon:

$('.fild select.produits').change(function() {
  

      categorie = $(this).attr("value");
  
this_input = $(this);
      $(this).before($('select.modeles option').remove());
      
    
       
     $.getJSON('/jason/les-produits.php' ,{id: categorie }, function(data) {




	  $.each(data, function(index,array) {
             $(this_input).before(before($('select.modeles').append( new Option(array['reference']+' / '+array['modele'], array['modele']+' / '+ array['reference']) )));
        }); 
   
  
});

Le code JSON:

Le problème c'est que la boucle ne ce fais pas, seulement un des modeles s'affiche.

Si vous voulez le tester sur le site, voici le lien : (C'est le champ produit, après "Votre devis")
/** Lien mort **/


Merci d'avance,
Igor.

Tu as une erreur "before" is not defined. Pourquoi il y est deux fois dans ton code ?

C'est pour selectionner le .fild où le select.produits est modifié.

Ce qu'il faut c'est que quand le select.produits est modifié, jquery prends la value selectionné, envoi avec getJSON avec le id(value) de produit.
Puis récupère le code JSON pour afficher les modèles de cette catégorie dans le select.modeles avec une option pour chaque modele.

Je ne sais pas ce que j'ai fait, mais seulement un des modeles s'affiche.
Il faut savoir qu'il y a plusieurs .fild .produits .modeles .... (c'est un formulaire dont l'utilisateur peut ajouter des champs à la volé.)

<fieldset class="fild" class="id1">
  <label for="produits">Produit</label><br/>
<select name="produits[]" class="produits" id="id1" required>
    <select name="produits[]" class="produits" id="id1" required="">
         <option value=""></option>
                <option value="1">Revêtements en Noix de Coco</option>
             <option value="2">Revêtements en Teck recyclé</option>
             <option value="3">Revêtements en Taille de Pommier</option>
             <option value="4">Placage en Fibre de Bananier</option>
             <option value="5">Revêtements en Coquille d'Amande</option>
             <option value="6">Elément décoratif en Coquille d'Amande</option>
             <option value="7">Bambou en Coquille d'Amande</option>
             <option value="8">Treillis</option>
             <option value="9">Panneaux en bois reconstitué</option>
             <option value="10">Dalles et Plans de travail en pierre recyclé</option>
             <option value="11">Panneaux décoratif en cristal recyclé</option>
             <option value="12">Mobilier Szalay</option>
          
</select>
   
</select>

  <label for="modele">Réf./Modele</label><br/>
<select name="modele[]" class="modeles" required>
    
    
</select>

  <label for="modele">Finition</label><br/>
<input type="text" value="" name="finition[]" />

  <label for="modele">Unité</label>
  <label><strong>m2</strong></label><br/><br/>

  <label for="modele">Quantité</label><br/>
<input type="text" value="" name="quantite[]" />

    </fildset>

Merci d'avance.
Igor.

[EDIT] ------>
Je viens de voir que si j'enleve un des deux before, tous les produits s'affichent, mais le select.modeles passe avant les select.produits,
Pourquoi ???

C'est très bizarre

J'ai envoyé la page à nouveaux pour un exemple.

A la relecture de ton code, en fait, je comprends même pas pourquoi tu utilises before().
Le append() ne se suffit pas à lui-même ?

(C'est le before qui entraîne le déplacement du select)

Merci ! J'ai enlevé les before() et ajouté next(); Et ça marche

Pour ceux qui veulent le code, le voici :

$('select.produits').change(function() {
 
 categorie = $(this).attr("value");
this_input = $(this);
    $(this_input).next($('.modeles option').remove());
    $(this_input).next($('.modeles').append( new Option('', ''))); 
    
  $.getJSON('/jason/les-produits.php' ,{id: categorie }, function(data) {
 $.each(data, function(index,array) {   $(this_input).next($('.modeles').append( new Option(array['reference']+' / '+array['modele'], array['id'])));    }); 
$('.modele_div').slideDown();
});  });

Merci encore à toi !