Coloriser les options d'un select

Version imprimable

Salut à tous, je vous expose mon problème. Je travaille actuellement sur une page où lorsqu'on passe notre curseur sur des options (sachant que j'ai +50 options) j'aimerai savoir comment les coloré le fond en gris juste au passage du curseur. J'ai tenté de multiple chose mais sans aboutissement:

la partie du Code html:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <select id="test" multiple name="monday[]"> <option value="1"></option> <option value="2"></option> <option value="3"></option> <option value="4"></option> <option value="5"></option> <option value="6"></option> <option value="7"></option> <option value="8"></option> <option value="9"></option> <option value="10"></option> <option value="11"></option> <option value="12"></option> <option value="13"></option> <option value="14"></option> <option value="15"></option> <option value="16"></option> <option value="17"></option> <option value="18"></option> <option value="19"></option> <option value="20"></option> </select> </div>
Code javascript:
Code:

1 2 3 4 5 var aza = document.getElementsById('test'); aza.addEventListener("mouseover", function(){ highlight(aza.style.backgroundColor = "grey"; });
Je pense que je n'arrive pas à ajouter un écouteur d’élément à tous les éléments option . (ici highlight est la fonction qui doit colorer les fonds)
Merci

Pièce jointe 427195

15/11/2018, 12h33
Beginner.

Bonjour,

Ce serait plus simple à faire avec du CSS alors pourquoi utiliser du JS juste pour ça ?

EDIT :

Ah oui c'est vrai que dans une discussion récente on a vu que certains pensent qu'on est limité pour ce qui de personnaliser les options (ajout d'une class et de style CSS) mais en fait j'ai posté ici #128 un exemple qui montre qu'on peut personnaliser plusieurs choses quand même et voici le lien pour tester : https://jsbin.com/retuhuqesi/1/edit?html,output
C'est facile de l'adapter pour faire ce que vous voulez...

Citation:

Envoyé par Kalix

Je pense que je n'arrive pas à ajouter un écouteur d’élément à tous les éléments option . (ici highlight est la fonction qui doit colorer les fonds)

Même si on utilise du JS pour faire cela il serait judicieux de ne pas ajouter un écouteur à toutes les options (surtout si il y en a beaucoup) on peut utiliser la délégation (un seul écouteur sur le select)...

Mais voici un exemple avec le CSS : https://jsbin.com/togekiwaqe/edit?html,output

Voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Model</title>
    <link rel="stylesheet" href="style.css">
    <style>
      #test option:hover {
        background-color: grey;
      }
 
      #test {
        width: 150px
      }
    </style>
  </head>
 
  <body>
 
    <div>
      <select id="test" size="21" multiple name="monday[]">
        <option value="1">option 1 </option>
        <option value="2">option 2 </option>
        <option value="3">option 3 </option>
        <option value="4">option 4 </option>
        <option value="5">option 5 </option>
        <option value="6">option 6 </option>
        <option value="7">option 7 </option>
        <option value="8">option 8 </option>
        <option value="9">option 9 </option>
        <option value="10">option 10 </option>
        <option value="11">option 11 </option>
        <option value="12">option 12 </option>
        <option value="13">option 13</option>
        <option value="14">option 14 </option>
        <option value="15">option 15 </option>
        <option value="16">option 16 </option>
        <option value="17">option 17 </option>
        <option value="18">option 18 </option>
        <option value="19">option 19 </option>
        <option value="20">option 20 </option>
      </select> 
    </div>
 
 
  </body>
 
</html>

C'est simple et court...

15/11/2018, 12h59
Kalix

Merci de votre réponse mais dans cette exo, je suis obligé d'utiliser du js pour ça

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title> Option hover en js </title>
  <style>
    div { margin: 30px}
    #test { width: 150px; }
    #test > option { text-align: center }
  </style>
  <script>
    function JS_inits() {
      document.querySelectorAll('#test > option').forEach( function(elm) {
        elm.addEventListener('mouseover',highlight,false);
      })
 
      function highlight(e) {
        this.style.backgroundColor = "grey";
        setTimeout( function(that) {
          that.style.backgroundColor = "transparent";  // ben sinon ça reste... 
        },200, this);
      }
    }; // JS_inits()
  </script>
</head>
 
<body onload="JS_inits();">
 
    <div>
        <select id="test" size="20" multiple name="monday[]">
          <option value="1">option 1 </option>
          <option value="2">option 2 </option>
          <option value="3">option 3 </option>
          <option value="4">option 4 </option>
          <option value="5">option 5 </option>
          <option value="6">option 6 </option>
          <option value="7">option 7 </option>
          <option value="8">option 8 </option>
          <option value="9">option 9 </option>
          <option value="10">option 10 </option>
          <option value="11">option 11 </option>
          <option value="12">option 12 </option>
          <option value="13">option 13</option>
          <option value="14">option 14 </option>
          <option value="15">option 15 </option>
          <option value="16">option 16 </option>
          <option value="17">option 17 </option>
          <option value="18">option 18 </option>
          <option value="19">option 19 </option>
          <option value="20">option 20 </option>
        </select> 
      </div>
 
</body>
</html>

Ah ok ce sont les consignes qui vous impose cela (c'est dommage de ne pas utiliser la délégation dans ce cas).

Ok alors voici un code qui respecte les consignes :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Version avec JS</title>
 
</head>
 
<body>
 
    <div>
        <select id="test" size="21" multiple name="monday[]">
            <option value="1">option 1 </option>
            <option value="2">option 2 </option>
            <option value="3">option 3 </option>
            <option value="4">option 4 </option>
            <option value="5">option 5 </option>
            <option value="6">option 6 </option>
            <option value="7">option 7 </option>
            <option value="8">option 8 </option>
            <option value="9">option 9 </option>
            <option value="10">option 10 </option>
            <option value="11">option 11 </option>
            <option value="12">option 12 </option>
            <option value="13">option 13</option>
            <option value="14">option 14 </option>
            <option value="15">option 15 </option>
            <option value="16">option 16 </option>
            <option value="17">option 17 </option>
            <option value="18">option 18 </option>
            <option value="19">option 19 </option>
            <option value="20">option 20 </option>
        </select> </div>
 
    <script>
        var allOptions = document.querySelectorAll('#test > option') // récupère toutes les options du select #test
 
        for (var i = 0; i < allOptions.length; i++) {
            allOptions[i].addEventListener('mouseover', highlight);
        }
 
        function highlight() {
 
            for (var i = 0; i < allOptions.length; i++) {
                allOptions[i].style.backgroundColor = "white"; // rétabli la couleur de fond par défaud
            }
            this.style.backgroundColor = "lightgray";
        }
    </script>
</body>
 
</html>

Le code est volontairement simple (j'utilise une boucle for alors que ce serait plus concis avec un forEach utilisée par psychadelic).

Ah oui j'ai oublié le lien : vous pouvez tester ici : https://jsbin.com/quduxageme/edit?html,output le code posté dans mon message précédent...

15/11/2018, 13h44
Invité
Bonjour,

Il n'y a pas besoin de JavaScript pour ça.
Ca se fait très bien en CSS :
Code:

1 2 3 4 5 select option:hover { background:lightgrey; color:darkblue; font-weight:bold; }
[EDIT]

Citation:

Envoyé par Kalix

Merci de votre réponse mais dans cette exo, je suis obligé d'utiliser du js pour ça

Oups, je n'avais pas vu... :oops:
15/11/2018, 13h57
Invité

@Beginner.
Oui, j'ai déjà vu ton code.

Une remarque :
1- en plus de la classe "selectionned", il faut aussi ajouter selected="selected" (dans ton script JS).
2- et mettre <select.... multiple="multiple">.

Sinon, si le formulaire doit être posté ensuite (et réceptionné en PHP avec $_POST, par exemple), on ne récupèrera pas les options choisies...

Bonjour,

J'ai ce code pour toi, le problème c'est que je suis sous Ubuntu => Firefox et que je ne peu pas personnaliser mes balises option ;(
Par conséquence je ne suis pas sûr que cela fonctionne.

Juste pour info, modifier les balises option est très difficile suivant les navigateurs et les système d'exploitations.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
      <meta charset="utf-8">
      <title>Test.fr - ColorOptionSelect</title>
  </head>
  <body>
      <select name="test">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
      </select>
  </body>
  <script>
        let elem=document.querySelectorAll('select[name="test"] option');
    for(let i=0;i<elem.length;i++){
      elem[i].addEventListener('mouseover',function(e){e.target.style.backgroundColor='grey';});
      elem[i].addEventListener('mouseout',function(e){e.target.style.backgroundColor='initial';});}
  </script>
</html>

PS: c'est la première fois que j'utilise la balise CODE ;)
J'ai regardé la prévisualisation, ça rend bien.

15/11/2018, 14h16
Beginner.

Citation:

Envoyé par jreaux62

@Beginner.

Oui, j'ai déjà vu ton code.

Une remarque :
1- en plus de la classe "selectionned", il faut aussi ajouter selected="selected" (via ton script JS).
2- et mettre <select.... multiple="multiple">.

Sinon, si le formulaire doit être posté ensuite (et réceptionné en PHP avec $_POST, par exemple), on ne récupèrera pas les options choisies...

Oui j'avais fait exprès de faire ça comme ça pour supprimer la surbrillance par défaut (fond bleu et couleur blanche) mais pour faire ce que tu dis on pourrait ajouter une fonction qui mette en "selected" toutes les options sélectionnées juste avant de poster le formulaire, ce n'est pas long à faire, juste un forEach...
15/11/2018, 14h22
Kalix

@Beginner j'ai toujours un petit problème, puis-je t'en faire par en message privé ?

Il y a aussi cette solution... ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
      var Options_Hightlighted = new Array();
 
      document.querySelectorAll('#test > option').forEach( function(elm) {
        elm.addEventListener('mouseover',highlight,false);
      });
 
      function highlight(e)  {
        while ((elm = Options_Hightlighted.pop()) != null )  elm.style.backgroundColor = "transparent";  
        this.style.backgroundColor = "grey";
        Options_Hightlighted.push(this);
      };