Masquer les options d'un select sous IE7

Version imprimable

Bonjour à tous,

Suite à moulte recherches infructueuses sur le net, dans la faq et sur cette section du forum, je me permet de poster un message sur un soucis visiblement connu, mais dont je n'ai pas trouvé la solution.

Voila, j'ai un select avec comme options plusieurs villes, à l'aide d'un simple bouton et d'un champ texte je dois etre capable de 'supprimer' (masquer serait plus exact) les villes ne correspondant pas au pays séléctionné, puis les rendre à nouveau visible en cliquant sur un autre bouton.

Concretement les options du select sont du type ' france->*ville*, 'uk->*ville* '. Je masque les villes avec un simple test d'expression réguliere.

le code suivant fonctionne tout à fait sous Firefox, mais pas sous IE :
Code:

1 2 3 4 5 6 7 8 9 10 11 var pays = document.getElementById("country").value; var locations = document.getElementById("location"); var reg1 = new RegExp(pays+"->"); for (i = 0 ; i < locations.options.length; i++) { if (reg1.test(locations.options[i].text) == false) { locations.options[i].style.display = 'none'; } }
D'apres le debugage que j'ai fait c'est la ligne dans la condition if qu'IE n'apprecie pas. Est-ce une question de noeud ou d'option 'style.display = 'none'' qu'il n'aime pas ...

Merci pour les futurs réponses,
Cordialement,

Wulfeir.

05/09/2008, 10h22
laurentibus

je vois pas ....
mais si tu veux plus d'info concernant l'erreur installe : Developer Toolbar
a télécharger ici

avec tu auras une erreur précise ...
05/09/2008, 11h04
wulfeir

Je n'ai malheureusement aucune erreur lors de l'execution du javascript, que ce soit sous la web developer toolbar de FF ou le companion.JS d'IE7.

En debuggant l'objet 'locations' je m'appercoie que tout va bien jusqu'au style.display qu'IE ne semble pas reconnaitre. Du coup je me demande s'il n'est pas possible de supprimer l'enfant de l'objet select au lieu de le masquer : le soucis majeure étant que l'utilisateur ne pourra pas revenir en arrière et qu'il devra recharger la page pour recuperer les valeurs supprimées.

Ou alors au chargement de la page je me garde un tableau avec toute les valeurs, que je serais alors capable de rinjecter sur un simple clique, mais sa suppose que mon tableau soit persistant, ce qui est pas gagné je crois :/

Cordialement,
Wulfeir.
05/09/2008, 11h45
Bovino

Code:

if (!locations.options[i].text.match(reg1))

Ne marche pas non plus ?
05/09/2008, 11h52
wulfeir
Et bien cela marche sur FF mais pas sous IE.
J'ai essayé de feinter en utilisant des css et en changeant la classe attribuée aux options, mais même combat, ça fonctionne sous FF mais pas sous IE.
Code:

1 2 3 4 5 6 .visible {display:block;} .invisible {display:none;} ... locations.options[i].className = "invisible"; ...
Pire, j'ai l'impression qu'IE ne tolère aucun style ou class pour les objets "options" des selects ... La misère en somme.

Cordialement,
Wulfeir.
05/09/2008, 12h05
Bovino

Ta fonction est déclenchée sur quel événement ?
05/09/2008, 15h36
wulfeir
Je suis parti sur du :
Code:

1 2 3 <a onclick="generation_liste();" onmouseover="this.style.cursor='pointer'"> <img src="./boutton.jpg" id="boutton"></a>
J'ai essayé avec l'événement "onchange" mais ça ne marche ni sur IE ni sur FF.

Cordialement,
Wulfeir.
05/09/2008, 15h42
Bovino
Code:

1 2 var pays = document.getElementById("country").value; var locations = document.getElementById("location");
country et location correspondent à quoi ?
L'idéal serait de montrer un peu plus de code...

J'essai de ne donner que l'essentiel du code pour eviter une lecture trop fastidueuse, en gros le 'country' est un champ texte ou je saisis un pays (be, cn ou autre) tandis que le 'locations' est le menu déroulant contenant toute les villes. Ca ressemble à ça :
Code:

1 2 3 4 5 6 7 8 9 10 <input type="text" id="country" size="10">   <a onclick="generation_liste();" onmouseover="this.style.cursor='pointer'"> <img src="./global_boutton.jpg" id="planete" ></a> <select id="location"> <option></option> <option>be->Bruxelles</option> <option>cn->Beijing</option> <option>de->Berlin</option> </select>
Le fonctionnement est le suivant : je saisi dans mon champ l'indicateur de pays pour filtrer les villes et je clique sur une image/bouton pour filtrer le contenu SANS le supprimer, ensuite je peux re-cliquer sur le bouton pour rendre à nouveau toute les villes visibles (je ne l'ai pas encore scripté puisque sous IE je n'arrive même pas a filtrer).

Voilu et merci Bovino de t'attarder sur le sujet !
Wulfeir.

09/09/2008, 09h29
wulfeir

En reflechissant je peux peut-être contourner le problème en utilisant les methodes append et remove child.

Le probleme qui se pose alors c'est qu'il faut que je fasse une copie de toute les options avant d'appeler ma fonction de tri, de sorte de pouvoir la restaurer ensuite.

Comment puis-je déclarer des variables globales qui s'initialise apres le chargement de la page et qui ont une portée suffisante pour pouvoir etre utiliser dans les fonctions de trie à la demande ?

Je pensais utiliser le onLoad sur le body, mais du coup mes variables auront une portée insuffisante :/

Une idée ?

Cordialement,
Wulfeir.
09/09/2008, 09h32
Bovino

Et mettre des class be cn de... à tes options ne te conviendrait pas ?
09/09/2008, 09h42
E.Bzz

Bonjour,

Citation:

Envoyé par wulfeir

Pire, j'ai l'impression qu'IE ne tolère aucun style ou class pour les objets "options" des selects ... La misère en somme.

C'est certainement ça, et pas très étonnant puisque IE ne gère pas non plus les évènements sur les options (contrairement à FF).

IE en somme :aie:

La solution append/remove pour regénérer la liste en dynamique semble être la meilleure solution. Le contenu (value et text) peut être stocké dans un tableau JS ...

A+

Bien bien bien, avec cette méthode j'obtient presque des résultats concluant !
Sous FF tout marche correctement, sous IE j'arrive à filtrer, mais lorsque je reinitialise la liste j'ai le meme nombre d'entrée qui défile, mais les lignes sont vides, IE ne doit pas acceder au texte dans l'option de la même manière que FF, je suppose...

Voila le code actuel :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Javascript : redirection</title>	
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	  <script type="text/javascript">
	  <!--
	  var all_value = new Array(); 
	  function chargement()
		{
	  	for (i = 0 ; i < document.getElementById("location").length ; i++)
			{
			all_value[i] = document.getElementById("location").options[i].text;
			}
		}
	  function generation_liste() 
		{
		var pays = document.getElementById("country").value;
		if (document.getElementById("image").src.match("global"))
			{
			document.getElementById("image").src = "local_boutton.jpg";
			var reg = new RegExp(pays+"=>");
			for (i = 0 ; i < document.getElementById("location").options.length; i++)
				{	
				if (!document.getElementById("location").options[i].text.match(reg))
					{
    					document.getElementById("location").removeChild(document.getElementById("location").options[i]);
   					i--;
 					}
				}
			}
		else
			{
			document.getElementById("image").src = "global_boutton.jpg";
			for (i = 0 ; i < document.getElementById("location").options.length; i++)
				{	
				document.getElementById("location").removeChild(document.getElementById("location").options[i]);
				i--;
 				}
			for (i = 1 ; i < all_value.length; i++)
				{
				var newOption = document.createElement("option");
                                // ! \\ setattribute ne fonctionne pas sous ie, pas meme que la methode suivante.
				newOption.text = all_value[i];
                                // ! \\ EDIT : newOption.innerHTML = all_value[i];
				document.getElementById("location").appendChild(newOption);
				}
			}
		}
	  -->
	  </script>
    </head>
    <body onLoad="chargement()">
	<br \>
	Generation dynamique de la liste deroulante : 
	<input type="text" id="country" size="10">&nbsp;&nbsp;
	<button type="button" id="boutton" value="global" style="background:white;" onmouseover="this.style.cursor='pointer'" onclick="generation_liste()">
	<img id="image" src="global_boutton.jpg"></button>
	<br \><br \>
	<div align="center">
	<select id="location">
	<option></option>
	<option>be=>Bruxelles</option>
	<option>cn=>Beijing</option>
	<option>de=>Berlin</option>

Donc la dernière étape que j'ai du mal à trouver ... comment IE rempli le texte d'une option : si quelqu'un à une idée pendant que je fouine de mon coté :)

J'éspère enfin que mon exemple pourra en aider quelques uns !

Cordialement,
Wulfeir.

09/09/2008, 14h35
E.Bzz

Effectivement, je crois que c'est dû au .text
Utilise plutôt innerHTML ...

A+
09/09/2008, 14h42
wulfeir

Une remarque courte mais pertinante, qui m'aura permit de résoudre ce mystère du Javascript sous IE. Un grand merci à toi E.Bzz et aux personnes ayant participer à ce poste !

RESOLU !

Cordialement,
Wulfeir.