Masquer une option dans un select

**pythéas** · 12/11/2007, 13h46

Comme indiqué dans l'intitulé, je cherche à masquer une option dans un select.
J'utilise une ligne (qui me semble) classique :

Code :

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

document.getElementById('monID').options[num_option].style.display = 'none';

Ca marche avec FireFox par contre IE ne modifie pas son affichage, ce qui est d'autant plus frustrant que si je lui demande de m'afficher les valeurs de ".style.display"

Code :

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

1
2
3
for (i = 0; i < document.getElementById('monID').length; i++){
alert(document.getElementById('monID').options[i].value + "affichage : " +
document.getElementById('monID').options[i].style.display);

Il m'affiche les bonnes valeurs,
et si je lui demande de masquer tout le select

Code :

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

document.getElementById('monID').style.display = 'none';

il le fait.

Si quelqu'un a une idée...

**pythéas** · 13/11/2007, 16h14

Salut,
non pas que je veuille insister lourdement

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

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

Masquer une option dans un select

JavaScript

Discussions similaires

Partager

Partager