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

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.

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.

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.

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