Discussion :

[novice77H]

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 :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
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

[jreaux62]

Bonjour,

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
const selects = document.querySelectorAll(".cselect");
selects.forEach(function (select) {
  if( select.dataset.val )
  {
    select.selectedIndex = select.dataset.val; // option selectionnée
  }
});

[novice77H]

Bonjour
Ça marche! Merci à toi

[NoSmoking]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

select.selectedIndex = select.dataset.val; // option selectionnée

Attention ne fonctionne que si la valeur vaut l'index !

Il est souvent préférable d'affecter directement la valeur au <select> et si celle-ci n'existe pas rien ne sera sélectionné.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
const selects = document.querySelectorAll(".cselect");
selects.forEach(function(select) {
  if (select.dataset.val) {
    //select.selectedIndex = select.dataset.val; // option selectionnée
 
    // affectation directe de la valeur
    select.value = select.dataset.val;
  }
});

[jreaux62]

C'est très juste.

Je ne sais même pas pourquoi j'ai utilisé .selectedIndex au lieu de .value.
(il faut dire que je code plus souvent en jQuery qu'en JS pur)