11548 sujets

JavaScript, DOM et API Web HTML5

Cacher une liste select-optgroup-options

Bonjour,
J'ai 2 select.
Le premier contient un liste de groupes, et le second contient les personnes faisant partie de ces groupes. Ce second select est composée comme suit:
groupe 1 (select)
---> nom groupe 1 (optgroup)
--------> personne 1 (option)
--------> personne 2 (option)
--------> etc
groupe 2 (select)
---> nom groupe 2 (optgroup)
--------> personne 1 (option)
--------> personne 2 (option)
--------> etc

Lorsque je change de groupe dans le permier select, la liste des noms correspondant au nouveau groupe reste affichée, l'autre liste est cachée.
Tout fonctionne a merveille........ Sauf, sous IE... Smiley fache
Dans mon script JS, j'affiche/cache les optgroup de cette façon:
Récupération de la liste des optgroup:

labelSelecteur = selecteur.options[selecteur.selectedIndex].label;
listeLabelsCible = cible.getElementsByTagName("optgroup");

Et dans une boucle, si les labels sont différents, je cache l'optgroup qui ne correspond pas:

listeLabelsCible[i].style.display='none';


IE n'aime pas 
getElementsByTagName("optgroup")
apparemment.

Comment faire SVP?[/i]
Modifié par casto40 (24 Aug 2009 - 11:57)
Salut,

Je crois que tu dois ajouter '[0]' à la fin de ton instruction, pour que ça fonctionne sous IE. C'est dû à la manière différente dont IE et Firefox interprètent le DOM. Si tu veux t'affranchir de ce genre de problèmes programamtion tu peux t'orienter vers une libraire javascritp du type Jquery ou Prototype Smiley cligne
Rajouter [0] à la fin de quelle instruction?

Concernant le JS, je tatonne, et ne connais pas bien ce langage.
Alors une libraire javascript du type Jquery ou Prototype, ça ne me parle pas du tout Smiley confused
Oui au bout de cette instruction:

listeLabelsCible = cible.getElementsByTagName("optgroup");


Si tu veux, ce sont des javascript qui te permettent de raccourcir/simplifier ton code. Par exemple pour sélectionner un élément en fonction de son id tu pourrais faire :
$('idDeLelement')

Au lieu du getElementById, et pour ta fonction qui récupère les classes c'est du pareil au même tu ferais :
$('.classeDesElements')

Et hop il te retourne un tableau qui contient ces classes, de plus c'est compatible tous les navigateurs et tu peux utiliser les tous les sélecteurs CSS à ta disposition avec des <, >, ~ ...
Le fait de rajouter [0] n'apporte rien de plus... Malheureusement....

Comment utiliser/installer Jquery ou Prototype?
Alors pour installer jquery, tu dois le télécharger à cette adresse.

Après tu le met dans ton répertoire de javascript, et tu le charges dans ta page html comme tout javascript externe. Pense bien à le positionner avant tout autre javascript qui utilise ses fonctions.

Après tu peux faire tout ce que tu veux avec, en plus son poid en version compressée est de 19ko donc il a peu d'influence sur la chargement de la page.

Tu peux aller consulter la documentation pour voir toutes les fonctions disponibles.

Ca devrait suffir Smiley cligne
Sujet clos
Aller à