Partage
  • Partager sur Facebook
  • Partager sur Twitter

Lier 2 select sur le même formulaire

    11 mai 2022 à 15:32:41

    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 

    • Partager sur Facebook
    • Partager sur Twitter
      11 mai 2022 à 17:06:50

      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...

      • Partager sur Facebook
      • Partager sur Twitter

      Quand un homme a faim, mieux vaut lui apprendre à pêcher que de lui donner un poisson.
      Confucius

        11 mai 2022 à 23:28:49

        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

        • Partager sur Facebook
        • Partager sur Twitter

        Lier 2 select sur le même formulaire

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur
        • Markdown