Masquer une option dans un select

Salut,
non pas que je veuille insister lourdement :roll: , mais je met un petit exemple qui sera, peut-être, plus parlant.

L'idée c'est de masquer certaines options des combos box afin que l'utilisateur ne puisse pas sélectionner dans la boite gauche une valeur supérieure à la valeur de droite. FF le fait et pas IE

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
64
65
66
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
 
<script type="text/javascript" language="JavaScript">
 
function verif_gauche()
{
if (document.getElementById("Fin").selectedIndex < document.getElementById("Debut").selectedIndex)
    document.getElementById("Fin").selectedIndex = document.getElementById("Debut").selectedIndex;
 
for (i = 0; i <= document.getElementById('Debut').selectedIndex; i++){
document.getElementById("Fin").options[i].style.display = "none";
 }
 for (i = document.getElementById('Debut').selectedIndex; i < document.getElementById("Fin").length; i++){
document.getElementById("Fin").options[i].style.display = "block";
 }
/* Quand on affiche on a les bonnes valeurs
 for (i = 0; i < document.getElementById("Fin").length; i++){
alert(document.getElementById("Fin").options[i].style.display);
 }*/
}
 
 function verif_droite()
{
if (document.all('dhDebut').selectedIndex > document.all('dhFin').selectedIndex)
    document.all('dhDebut').selectedIndex = document.all('dhFin').selectedIndex;
 
for (i = 0; i <= document.all('dhFin').selectedIndex; i++){
document.all('dhDebut')[i].style.display = 'block';
 }
 for (i = document.all('dhFin').selectedIndex + 1; i < document.all('dhDebut').length; i++){
document.all('dhDebut')[i].style.display = 'none';
 }
}
 
</script>
 
</head>
 
<body>
 
<select name="dhDebut" id="Debut" onchange="javascript: verif_gauche(); ">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
<option>f</option>
<option>g</option>
<option>h</option>
</select> et le 
<select name="dhFin" id="Fin" onchange="javascript: verif_droite(); ">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
<option>f</option>
<option>g</option>
<option selected>h</option>
</select>
 
</body>
</html>

Voilà....