Discussion :

[clavier12AZQSWX]

bonjour,

j'ai une page qui contient une quarantaine de liste déroulantes, ce sont des "slots" de sélection de rendez-vous.
pour aider l'utilisateur à l'utiliser, je souahite mettre en vert (soit le texte, soit le background), l'option de la liste quand elle n'est pas sélectionnée encore.
voici un exemple de liste dans ma page html :

Code html :

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

1
2
3
4
5
6
7
8
<select class="custom-select ew-custom-select" data-table="etudiants_groupe" data-field="x_etu_grp1_id" data-value-separator=", " id="x4_etu_grp1_id" name="x4_etu_grp1_id" style="font-size: 9px;">
<option value="">Choisir...</option>
<option value="1">NC</option>
<option value="94">ART</option>
<option value="140">car spéciaux/toto l'été</option>
<option value="151">cours individuels</option>
<option value="95">geek</option>
</select>

Les listes non-sélectionnées affichent donc par défaut "Choisir..." car c'est la première dans la liste des options (pour autant, la propriété attribut selected n'est pas placée dans le code html)

j'ai tenté ce code mais je ne comprends pas pourquoi il ne fonctionne pas alors que je "collecte" tous les élements de type SELECT et fait le test :

Code js :

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

1
2
3
$("select").each(function() {
			if ($(this).text()=="") $(this).css("color", "red"); 
			});

bizarrement aucune liste ne passe en rouge!

juste avant, j'utilise le même code pour réduire la taille de la police et ça marche bien, donc le selector est ok pour traiter "toutes les listes" et leurs options :

Code js :

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

$("select").each(function() { 	$(this).css("font-size", "9px");  });

qu'est-ce qui ne va pas dans ma condition if ($(this).text()=="") ?

[NoSmoking]

Bonjour,
il te faut faire le test sur le seletedIndex, si celui-ci vaut 0 alors, dans ton cas, aucune sélection n'est faite.

Tu peux également mettre une value="0" à la première <option> et utiliser $element.val() == 0

[SpaceFrog]

pas plutot -1 pour le selectedIndex lorqu'il n'y a pas eu de selection ? et mettre value -1 sur le premier option "Choisir..." quitte à le mettre à selected pas défaut par sécurité ...

[NoSmoking]

pas plutot -1 pour le selectedIndex lorqu'il n'y a pas eu de selection ?

Dans l'absolue oui mais dans la pratique si le <select> est non vide et qu'aucune <option> n'est selected la valeur de selectIndex est 0.

On met le selectedIndex à -1 si l'on ne souhaite pas soumettre le contrôle.

On notera également que si aucune value n'est indiquée c'est le texte de l'<option> en cours de sélection qui est envoyé.

Dans le cas présent je gérerais cela simplement de la façon suivante, en jouant avec les classes CSS :

Code css :

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

1
2
3
4
5
6
7
8
9
select {
  border: 1px solid currentColor;
  color: #F00;
  background-color: #FDE6;
}
select.selected {
  color: #0A0;
  background-color: #EFD6;
}

et sur le change :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
const selects = document.querySelectorAll("select");
selects.forEach((select) => {
  select.addEventListener("change", () => {
    const choix = select.selectedIndex;
    if (0 === choix) {
      select.classList.remove("selected");
    }
    else {
      select.classList.add("selected");
    }
  })
});

[clavier12AZQSWX]

bonjour,

merci vous deux, j'ai résolu mon problème de 3h grâce à vous !
au final, je fais comme cela :

Code js :

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

if ($(this)[0].selectedIndex <= 0)  $(this).css("background-color", "#f9fdd0");

La dernière remarque de NoSmoking est judicieuse car comme je travaille derrière un framework JS propriétaire, même si en BD il n'y a rien dans le champ, le framework vient ajouter dans les options une ligne "choisir.." sans valeur et elle est affichée par défaut. et pourtant quand je regarde le code html (f12, inspecter la liste) , cette ligne option n'a pas le Selected en face de l'option html Choisir! Même si elle est affichée (et supposée sélectionnée) le code HTML ne la considère pas...