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