Bonjour !

J'ai crée un formulaire qui contient 2 select que je voudrais lier, je m'explique : mon premier select me permet de sélectionner un fournisseur et je voudrais que mon deuxième select qui me permet de sélectionner une reference d'article ne propose que les references qui viennent du fournisseur sélectionné précédemment. 

Ne maitrisant que très peu le JS je sais récupérer la valeur du select fournisseur mais je n'arrive pas a intégrer cette valeur dans ma requête SQL pour preciser la recherche de mon deuxième select. 

Sauriez vous éclairer ma lanterne ? 

Merci d'avance 

Salut,

Idéalement (à mon avis) il faudrait faire une requête SQL pour get tous les fournisseurs ET toutes les références et ensuite bosser sur une fonction qui rempli le second select quand l'évènement "onchange" est appelé sur le premier select.

De quelle façon tu lie ta référence à ton fournisseur dans ta requête SQL ? / qu'est-ce que tu récupère ?

Vu que dans tous les cas tu récupère un tableau, en JS il est simple de faire une fonction de "recherche" dans un tableau (il me semble même que JS intègre cette fonction)
Suite à quoi tu met à jour le second select avec le résultat de ta fonction.

Je sais pas si j'ai été très clair...

Bonsoir,

Il y a surement plein de façon de faire.

Si tu sais recuperer la valeur du premier select, tu peut par exemple utiliser cette valeur comme class pour les options du second select que tu veut montrer .

Cela donnerait un code du genre

let prim = document.querySelector('[name=main]');
let seco = document.querySelectorAll('[name=secondary] option[value]');
prim.addEventListener('change',function() {
  document.querySelector('select[name="secondary"]').value='choix secondaire';// reset value du select
  let activeclass = this.value;
  for (i=0;i < seco.length;i++) {
    if (seco[i].classList.contains(activeclass)) {
      seco[i].style.display="block";
    }
    else {
      seco[i].style.display="none";
    }
  }  
})

avec un HTML du genre

<select name="main">
  <option > choix principal</option>
  <option value="a0">a0</option>
  <option value="a1">a1</option>
  <option value="a2">a2</option>
  <option value="a3">a3</option>
  <option value="a4">a4</option>
</select>

<select name="secondary">
  <option >choix secondaire</option>
  <option class="a0" value="a-0">a-0 A</option>
  <option class="a1" value="a-1">a-1 B</option>
  <option class="a2" value="a-2">a-2 C</option>
  <option class="a3" value="a-3">a-3 D</option>
  <option class="a4" value="a-4">a-4 E</option>
  <option class="a0" value="a-0">a-0 F</option>
  <option class="a1" value="a-1">a-1 G</option>
  <option class="a2" value="a-2">a-2 H</option>
  <option class="a3" value="a-3">a-3 I</option>
  <option class="a4" value="a-4">a-4 J</option>
  <option class="a0" value="a-0">a-0 K</option>
  <option class="a1" value="a-1">a-1 L</option>
  <option class="a2" value="a-2">a-2 M</option>
  <option class="a3" value="a-3">a-3 N</option>
  <option class="a4" value="a-4">a-4 O</option>
  <option class="a0" value="a-0">a-0 P</option>
  <option class="a1" value="a-1">a-1 Q</option>
  <option class="a2" value="a-2">a-2 R</option>
  <option class="a3" value="a-3">a-3 S</option>
  <option class="a4" value="a-4">a-4 T</option>
</select>

et une base  css  comme

select[name="secondary"] option[value] {
  display: none;
}

C'est assez naïf certes, mais cela fonctionne à priori. exemple en ligne: https://jsfiddle.net/730L91ka/

-
Edité par gcyrillus 11 mai 2022 à 23:30:15