A voir également:
- Javascript liste déroulante onchange
- Liste déroulante excel - Guide
- Liste déroulante en cascade - Guide
- Telecharger javascript - Télécharger - Langages
- Supprimer liste déroulante excel - Forum Word
- Effacer liste déroulante - Forum Réseaux sociaux
1 réponse
Salut comme pour le onChange il faut faire appel à la programmation événementielle.
Survoler un élément se fait en effet avec mouseover:
description ici avec une meilleure façon de faire que de mettre une fonction dans l'attribut d'une balise:
https://www.delftstack.com/fr/howto/javascript/mouse-over-event-in-javascript/
Peut-être une liste option select n'est pas vraiment le plus adapté pour ce que vous voulez.
Ou plutôt la façon dont vous avez fait l'écouteur d'événement.
Plutôt que de demander au survol des élément d'options qui n'apparaissent que si on veut changer la valeur sélectionnée il serait plus logique de faire cela lors du survol de l'élément parent (la balise <select> dans notre cas) ou alors du changement (qui n'est pas une validation dans un formulaire).
Notez que votre façon de faire n'est ni intuitif ni pratique/ergonomique. Vous fournissez donc à votre utilisateur quelque chose de pas pratique ni facile à comprendre et utiliser ce qui n'est pas vraiment une bonne chose.
Regardez par là avec la propriété .selected cela peut vous aider aussi parce que dans le code que vous montrez vous demander la valeur du select qui lui même n'a aucune valeur, ce sont les choix proposés (<option>) qui ont une valeur:
https://www.w3schools.com/jsref/prop_option_selected.asp
Voilà vous n'avez pas une bonne approche du problème ce qui n'aide pas pour une solution qui fonctionne.
Ce n'est pas la valeur de SELECT qui doit être obtenue(et contient une couleur) mais bien la valeur de l'option sélectionnée qu'il vous faut obtenir.
Une présentation en liste déroulante n'est pas géniale pour faire ce que vous voulez au survol car difficilement claire, compréhensible et donc pas utilisable de façon évidente par l'utilisateur.
D'ailleurs dans une liste déroulante la liste n'apparaît que quand on clique dessus donc pas accessible sans que la souris soit très proche de tout les éléments, les options possible ne sont pas toutes visibles sauf lorsque que l'on veut changer et le survol de plusieurs lignes consécutives possible même si on ne veut pas d'aperçu du changement de couleur et facilement trompeur. En voulant avoir l'aperçu de la troisième couleur il faudra passe par l'aperçu des couleurs précédentes, ce qui en plus de faire fonctionner le programme pour des couleurs que l'utilisateur ne veut pas visionner et bien entendu de rendre le résultat confus et pas facile à comprendre(entre 2 hauteurs de lignes d'une option dans la liste il est facile d'avoir la souris sur l'élément au dessus ou au dessous donc pas ce qu'on veut).
Rajouter les erreurs possibles sur un mobile en tactile où c'est le doigt qui va faire ça sur l'écran ou simplement le fait que l'utilisateur peut utiliser les flèches du clavier pour changer la valeur et vous perdez la fonction d'aperçu au survol de la souris.
Clairement vous avez une mauvaise compréhension de où vient la valeur de la liste déroulante et une liste déroulante n'est pas adapté à cette fonction d'aperçu de la couleur que doit avoir votre programme.
Une liste de cases à cocher avec l'affichage d'un carré de couleur mise en forme en CSS pour les afficher sur une ligne me sembles plus apte à répondre à votre besoin.
Quitte à séparer totalement l'élément de sélection (la case à cocher) de l'élément d'aperçu un simple carré de couleur.
Exemple:
Avec ce HTML/CSS il vous suffit de rajouter la fonction d'aperçu pour l'événement du survol soit de chaque balise label (qui comprends le texte et le carré de couleur fait avec un div)soit le div. Tout cela évite les problèmes que j'ai expliqués et rends la navigation aisée et votre code plus facile à écrire.
Sinon avec une liste déroulante laisser tomber le survol et faitre l'aperçu lors du changement.
Mais bien sûr c'est le select qui change et vous devez aller chercher non la valeur du select mais la valeur de l'option sélectionnée( avec .selected vous obtenez l'objet HTMLElementOPTION en question puis la valeur qu'elle contient avec .value)
Survoler un élément se fait en effet avec mouseover:
description ici avec une meilleure façon de faire que de mettre une fonction dans l'attribut d'une balise:
https://www.delftstack.com/fr/howto/javascript/mouse-over-event-in-javascript/
Peut-être une liste option select n'est pas vraiment le plus adapté pour ce que vous voulez.
Ou plutôt la façon dont vous avez fait l'écouteur d'événement.
Plutôt que de demander au survol des élément d'options qui n'apparaissent que si on veut changer la valeur sélectionnée il serait plus logique de faire cela lors du survol de l'élément parent (la balise <select> dans notre cas) ou alors du changement (qui n'est pas une validation dans un formulaire).
Notez que votre façon de faire n'est ni intuitif ni pratique/ergonomique. Vous fournissez donc à votre utilisateur quelque chose de pas pratique ni facile à comprendre et utiliser ce qui n'est pas vraiment une bonne chose.
Regardez par là avec la propriété .selected cela peut vous aider aussi parce que dans le code que vous montrez vous demander la valeur du select qui lui même n'a aucune valeur, ce sont les choix proposés (<option>) qui ont une valeur:
https://www.w3schools.com/jsref/prop_option_selected.asp
Voilà vous n'avez pas une bonne approche du problème ce qui n'aide pas pour une solution qui fonctionne.
Ce n'est pas la valeur de SELECT qui doit être obtenue(et contient une couleur) mais bien la valeur de l'option sélectionnée qu'il vous faut obtenir.
Une présentation en liste déroulante n'est pas géniale pour faire ce que vous voulez au survol car difficilement claire, compréhensible et donc pas utilisable de façon évidente par l'utilisateur.
D'ailleurs dans une liste déroulante la liste n'apparaît que quand on clique dessus donc pas accessible sans que la souris soit très proche de tout les éléments, les options possible ne sont pas toutes visibles sauf lorsque que l'on veut changer et le survol de plusieurs lignes consécutives possible même si on ne veut pas d'aperçu du changement de couleur et facilement trompeur. En voulant avoir l'aperçu de la troisième couleur il faudra passe par l'aperçu des couleurs précédentes, ce qui en plus de faire fonctionner le programme pour des couleurs que l'utilisateur ne veut pas visionner et bien entendu de rendre le résultat confus et pas facile à comprendre(entre 2 hauteurs de lignes d'une option dans la liste il est facile d'avoir la souris sur l'élément au dessus ou au dessous donc pas ce qu'on veut).
Rajouter les erreurs possibles sur un mobile en tactile où c'est le doigt qui va faire ça sur l'écran ou simplement le fait que l'utilisateur peut utiliser les flèches du clavier pour changer la valeur et vous perdez la fonction d'aperçu au survol de la souris.
Clairement vous avez une mauvaise compréhension de où vient la valeur de la liste déroulante et une liste déroulante n'est pas adapté à cette fonction d'aperçu de la couleur que doit avoir votre programme.
Une liste de cases à cocher avec l'affichage d'un carré de couleur mise en forme en CSS pour les afficher sur une ligne me sembles plus apte à répondre à votre besoin.
Quitte à séparer totalement l'élément de sélection (la case à cocher) de l'élément d'aperçu un simple carré de couleur.
Exemple:
<p>Choix de la couleur: <span style="font-style:italic;">Survolez la couleur pour avoir un aperçu</span></p> <input type=checkbox name=couleur1 value=#FF913B> <label for=couleur1>Orange<div style='width:2em;height:2em;background-color:ff913b; '></div></label> <input type=checkbox name=couleur2 value=#b6b6b6> <label for=couleur2>Gris<div style='width:2em;height:2em;background-color:b6b6b6; '></div></label> <!-- ...etc on peut bien sûr améliorer avec des classes CSS et automatiser/rendre dynamique si on veut en créant les éléments avec la programmation dans une boucle sur un tableau(Array) qui contient toutes les couleurs, ainsi si on veut rajouter/enlever/modifier les couleurs proposées il suffit de changer les valeurs du tableau -->
Avec ce HTML/CSS il vous suffit de rajouter la fonction d'aperçu pour l'événement du survol soit de chaque balise label (qui comprends le texte et le carré de couleur fait avec un div)soit le div. Tout cela évite les problèmes que j'ai expliqués et rends la navigation aisée et votre code plus facile à écrire.
Sinon avec une liste déroulante laisser tomber le survol et faitre l'aperçu lors du changement.
Mais bien sûr c'est le select qui change et vous devez aller chercher non la valeur du select mais la valeur de l'option sélectionnée( avec .selected vous obtenez l'objet HTMLElementOPTION en question puis la valeur qu'elle contient avec .value)
