Des listes en couleur !!!

Version imprimable

17/05/2006, 16h36
calahaan

Des listes en couleur !!!

Bonjour à tous
Est-il possible en javascript de colorer certaine ligne du champ select (liste) ?

En html c’est très simple :
<select name="MultiColorSelect">
<option value class="ClassCssRouge">Ligne en rouge</option>
<option value class="ClassCssBleu">Ligne en bleu</option>
Etc
</select>

Voila tout cela est très beau, mais si je souhaites faire la même chose en javascript, là, ça se complique !
Je ne connais pour insérer des lignes que cette méthode :
MultiColorSelect[NumLigneAInserer] = new Option(“Texte de ma ligne”, ValeurDeMaLigne);
Et pas moyen à ce niveau de qualifier l’option avec une classe par exemple.
Alors quelqu’un connaîtrait-il une astuce en javascript permettant de le faire ?
Merci d’avance

Bjr

Ceci repond-t-il à ta question ?

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
 
<html>
<head>
<style>
body
{
 font-family : arial;
 font-size:9pt;
}
option.rouge
{
 color:#FF0000;
}
option.bleu
{
 color:#0000FF;
}
option.vert
{
 color:#00FF00;
}
</style>
<script language="JavaScript">
<!--
function charger_liste(liste_id)
{
 var lst = document.getElementById(liste_id);
  var opt = new Option("Ligne en rouge","V_ROUGE",false,false);
 opt.className="rouge"; 
 lst.options[lst.options.length] = opt;
 
  var opt = new Option("Ligne en bleu","V_BLEU",false,false);
 opt.className="bleu"; 
 lst.options[lst.options.length] = opt;
 var opt = new Option("Ligne en vert","V_VERT",false,false);
 opt.className="vert"; 
 lst.options[lst.options.length] = opt;
}
//-->
</script>
</head>
<body onload="charger_liste('ma_liste')">
<select id="ma_liste">
</select>
</body>
</html>

tous les délires sont en effet possibles!

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
 
</head>
<body>
 
<p>
<select id="sel">
<option>pas assez d'options</option>
</select>
</p>
 
<script type="text/javascript">
 
var coul, alea, s, op;
 
function setcol(){
 coul="rgb(";
 for(j=0;j!=3;j++){
  coul+=Math.floor(Math.random()*256)+","
 }
return coul.replace(/,$/,")")
}
 
s=document.getElementById("sel");
for(i=0;i!=10;i++){
 op=new Option("on s'en fout","op"+i,false,false);
 alea=setcol();
 op.style.backgroundColor=alea;
 s.add(op, undefined);
}
 
</script>
 
</body>
</html>

20/05/2006, 18h38
calahaan

Cette réponse est tout simplement royale !!!
Merci beaucoup :D