Partage
  • Partager sur Facebook
  • Partager sur Twitter

Changer selected option en fonction d'un attribut

Sujet résolu
    18 septembre 2021 à 12:57:19

    Bonjour à tous
    Je viens demander de l'aide.

    J'ai des select générés dynamiquement et contenant un attribut "data-val". Ce que j'aimerai faire c'est que pour chaque select, l'option sélectionnée soit celle qui a la même value que l'attribut "data-val".
    Les select ont la même classe et le même name, j'ai essayé avec un queryselectorall afin de boucler sur les select et effectuer l'opération mais sans résultat et la je me tourne vers vous.

    Ci dessous un mon code :

    <select name="nselect" class="cselect" data-val="1">
    	<option value="" selected>Choose</option>
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
    </select>
     
    <select name="nselect" class="cselect" data-val="3">
        <option value="" selected>Choose</option>
    	<option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
    </select>
    const elements = document.querySelectorAll(".cselect");
    elements.forEach(function (element) {
    var item = element.getAttribut('data_val');
    //la j'aimerai que l'option selectionnée soit celle avec value = item
    });

    Merci d'avance pour votre aide.

    Cordialement


    • Partager sur Facebook
    • Partager sur Twitter
      18 septembre 2021 à 13:18:44

      Tout d'abord, c'est element.getAttribute().

      Ensuite, à la ligne 4 de ton js :

      let options = element.children; ( récupère une collection d'éléments <option> )
      for(let option of options)
      {
         if(option.value == item)
            option.selected = true;
      }

      J'ai écris ça à la volée, sans vérifier. Je me remet dessus plus sérieusement après manger si ça n'a pas marché ou si tu n'as pas eu de meilleure réponse.

      • Partager sur Facebook
      • Partager sur Twitter
        18 septembre 2021 à 13:24:03

        LucasWerquin a écrit:

        Tout d'abord, c'est element.getAttribute().

        Ensuite, à la ligne 4 de ton js :

        let options = element.children; ( récupère une collection d'éléments <option> )
        for(let option of options)
        {
           if(option.value == item)
              option.selected = true;
        }

        J'ai écris ça à la volée, sans vérifier. Je me remet dessus plus sérieusement après manger si ça n'a pas marché ou si tu n'as pas eu de meilleure réponse.


        Merci pour ta réponse, je teste cela et je te reviens. Bon appétit!
        • Partager sur Facebook
        • Partager sur Twitter
          18 septembre 2021 à 14:37:10

          Voilà, c'est bon pour moi.
          Une petite erreur d'orthographe dans ton js ligne 3, tu as mis data_val au lieu de data-val.
          Sinon ce que j'ai mis fonctionne :

          const elements = document.querySelectorAll(".cselect");
          elements.forEach(function (element) {
              var item = element.getAttribute('data-val');
              let options = element.children; //( récupère une collection d'éléments <option> )
              for(let option of options)
              {
                  console.log(option.value);
                  if(option.value == item)
                      option.selected = true;
              }
          });

          Mais fais bien attention à ton orthographe, déjà que la syntaxe est pointilleuse ( je me souviens avoir buté pendant une bonne semaine sur un script à cause d'un point-virgule oublié à la fin d'une instruction ) si tu fais des erreurs dans les noms de variables ou de fonction, tu vas pas t'en sortir ;)
          Moi j'ai la méthode "pas à pas", je met des console.log() partout dans mon code, souvent je copie-colle les noms de variables ou de fonction pour être sûr de pas me planter ( js est case sensitive, alors t'as vite fait de mettre une majuscule où il faut pas et tu arrives jamais à le voir )...
          Après, il y a des habitudes à prendre, surtout dans les noms. Bon, le camelCase est une convention en JS, après pour les noms d'attributs choisis bien entre les tirets OU les underscores et tu t'y tiens! Avec des habitudes d'obsessionnel compulsif tu t'évites ce genre de bourdes qui parfois te font perdre du temps à rien.

          • Partager sur Facebook
          • Partager sur Twitter
            18 septembre 2021 à 14:48:02

            LucasWerquin a écrit:

            Voilà, c'est bon pour moi.
            Une petite erreur d'orthographe dans ton js ligne 3, tu as mis data_val au lieu de data-val.
            Sinon ce que j'ai mis fonctionne :

            const elements = document.querySelectorAll(".cselect");
            elements.forEach(function (element) {
                var item = element.getAttribute('data-val');
                let options = element.children; //( récupère une collection d'éléments <option> )
                for(let option of options)
                {
                    console.log(option.value);
                    if(option.value == item)
                        option.selected = true;
                }
            });

            Mais fais bien attention à ton orthographe, déjà que la syntaxe est pointilleuse ( je me souviens avoir buté pendant une bonne semaine sur un script à cause d'un point-virgule oublié à la fin d'une instruction ) si tu fais des erreurs dans les noms de variables ou de fonction, tu vas pas t'en sortir ;)
            Moi j'ai la méthode "pas à pas", je met des console.log() partout dans mon code, souvent je copie-colle les noms de variables ou de fonction pour être sûr de pas me planter ( js est case sensitive, alors t'as vite fait de mettre une majuscule où il faut pas et tu arrives jamais à le voir )...
            Après, il y a des habitudes à prendre, surtout dans les noms. Bon, le camelCase est une convention en JS, après pour les noms d'attributs choisis bien entre les tirets OU les underscores et tu t'y tiens! Avec des habitudes d'obsessionnel compulsif tu t'évites ce genre de bourdes qui parfois te font perdre du temps à rien.

            Ca marche!!

            Merci pour ton aide et tes conseils, je prend note.

            Merci

            • Partager sur Facebook
            • Partager sur Twitter

            Changer selected option en fonction d'un attribut

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