Coloriser les options d'un select

**Kalix** · 15/11/2018, 11h23

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 HTML :

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

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 :

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

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

**Beginner.** · 15/11/2018, 12h33

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...

**Beginner.** · 15/11/2018, 12h57

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 html :

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

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...

**Kalix** · 15/11/2018, 12h59

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

**psychadelic** · 15/11/2018, 13h01

Code HTML :

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

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>

**Beginner.** · 15/11/2018, 13h31

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 html :

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

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...

Invité · 15/11/2018, 13h44

Bonjour,

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

Code css :

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

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

[EDIT]

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...

Invité · 15/11/2018, 13h57

@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...

**shroomsconect** · 15/11/2018, 14h02

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 HTML :

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

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.

**Beginner.** · 15/11/2018, 14h16

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...

**Kalix** · 15/11/2018, 14h22

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

**psychadelic** · 15/11/2018, 14h28

Il y a aussi cette solution...

Code :

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

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);
      };

Coloriser les options d'un select

JavaScript

Discussions similaires

Partager

Partager