hierarchisation des options dans un select
Un souci récurrent avec les select est leur comportement sous IE.
En effet les option ne supportent pas beaucoup d'attribut et surtou pas ceux de style.
Il est par conséquent impossible sous IE d'aligner différemment les contenu des options d'un même select. Et donc pas de possibilité d'indenter les options.
Voici un peut code que ThomasR et moi nous sommes amusés à mettre en place pour émuler une hierarchisation des options dans un select à la fois pour IE et FFX.
à noter qu'ici la hierarchisation se base sur la longueur de la value de l'option, mais elle peut être autre ...
Firefox accèpte les padding alors il suffit d'attribuer un className avec des padding augmentés.
Pour IE c'est un peu plus complexe car la seule façon d'indenter est d'insérer des espaces insécables
J'ai juste ajouté un petit String.prototype repeat pour palier le manque d'une fonctoin de repétiton d'un caractère. (on peut le gérer par une simple fonction également)
Voici donc le petit 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
| <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<style type="text/css">
.P {padding-left:10px}
.PP {padding-left:15px;}
.PPP {padding-left:20px;}
</style>
<script type="text/javascript">
String.prototype.repeat=function(nr){
var output=""
for(i=1;i<nr;i++)
output+=this;
return output;
}
function FonctionJS (){
taboptions=document.getElementById('sel').getElementsByTagName('option')
var j=0;
while(taboptions[j]){
monOption=taboptions[j]
mypadding=" "
if(document.all){
optText=monOption.innerHTML.replace(/^( )+/,'')
monOption.innerHTML=mypadding.repeat(monOption.value.length)+optText;
}
else{ monOption.className = 'P'.repeat(monOption.value.length);
}
j++;
}
}
</script>
</head>
<body>
<p>
<select id="sel">
<option value="1">truc</option>
<option value="11">truc</option>
<option value="111">truc</option>
<option value="12">truc</option>
<option value="121">truc</option>
<option value="122">truc</option>
<option value="123">truc</option>
<option value="13">truc</option>
<option value="2">truc</option>
<option value="21">truc</option>
<option value="22">truc</option>
<option value="221">truc</option>
<option value="222">truc</option>
<option value="23">truc</option>
<option value="231">truc</option>
<option value="232">truc</option>
</select>
<input type='button' onclick="FonctionJS()" value="go" />
</p>
</body>
</html> |
