Problème innerhtml avec IE [Résolu]

johnb · 08/08/2011, 13h16

Bonjour,

j'ai une fonction javascript déclenchée lorsqu'un utilisateur sélectionne une région dans une liste déroulante, qui permet de modifier dynamiquement le contenant d'une autre liste déroulante contenant une liste de départements, afin de n'afficher que les départements de la région sélectionnée.

Cette fonction fonctionne correctement avec Firefox, mais ne fonctionne pas avec Internet Explorer. Avec IE, la liste déroulante des départements devient vide dès que je sélectionne une région (donc dès le premier appel de la fonction javascript).

Le code de la fonction javascript est le suivant:

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
function filtrerDepartement()
{
     var v_list_reg_insee = document.getElementById('lle_reg_insee');
    var v_reg_insee = v_list_reg_insee.options[v_list_reg_insee.selectedIndex].value;
    var v_innerhtml='<option value="" selected="selected"></option>';
    var inc=0;
    for(inc=0;inc<v_listdeplibelle.length;inc++){
        if(v_reg_insee == v_listdepreginsee[inc] || v_reg_insee=='00' || v_reg_insee=='')
        {
 
            v_innerhtml = v_innerhtml + '<option value="'+v_listdepinsee[inc]+'">'+v_listdepinsee[inc]+' - '+v_listdeplibelle[inc]+'</option>';
        }
    }
 
    document.getElementById('lle_dep_insee').innerHTML=v_innerhtml;
}

A des fins de tests, j'ai affecté en dur la valeur suivante à la valeur "v_innerhtml" avant de l'affecter (pour remplacer la boucle for):

Citation:

Lorsque je vérifie la valeur de la propriété "innerHTML" de l'objet en question en utilisant le debugger javascript (shift+F12 dans IE8), la valeur est la suivante:

Citation:

68 - HAUT-RHIN</OPTION>

Il semble donc y avoir un troncage, étant donné que le début de la balise (<option ...) est supprimé.

Avez-vous une idée ?

Merci

Sharcoux · 08/08/2011, 13h20

Code :

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

v_innerhtml = v_innerhtml + '<option value="'+v_listdepinsee[inc]+'">'+v_listdepinsee[inc]+' - '+v_listdeplibelle[inc]+'</option>';

essaye de remplacer ta ligne par ça :

Code :

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

1
2
 
v_innerhtml = v_innerhtml + '<option value='+v_listdepinsee[inc]+'>'+v_listdepinsee[inc]+' - '+v_listdeplibelle[inc]+'</option>';

(aucune garantie du résultat, je travaille jamais avec IE)

Auteur · 08/08/2011, 13h23

bonjour,

ne pas utiliser innerHTML pour créer une liste !!!!!

Utilise les fonctions DOM :
http://javascript.developpez.com/tut...ge=page_5#LV-B

jreaux62 · 08/08/2011, 14h21

Bonjour,
ceci dit, les listes déroulantes liées avec Ajax, c'est bien !
- Web 2.0, allez plus loin avec AJAX et XMLHttpRequest -> Listes liées

johnb · 08/08/2011, 16h11

Je vous remercie pour vos réponses.

Pour répondre à "Sharcoux":
Cette syntaxe ne permet pas de corriger le problème, j'ai exactement le même comportement.

J'ai trouvé le lien suivant sur le site du support Microsoft indiquant qu'un BUG existe dans IE concernant la propriété "innerHTML" des objets de type "select":
http://support.microsoft.com/default...b;en-us;276228

J'ai pu faire fonctionner mon code en utilisant leur solution de contournement, à savoir encapsuler l'objet "select" dans une division <div id="nomdiv"></div> et en modifiant la propriété "innerHTML" de la division "nomdiv" et non directement celle de l'objet "select".

Si j'ai du temps par la suite j'essaierai de mettre en place une autre solution, comme l'utilisation des fonctions DOM proposé plus haut, qui parait tout de même plus propre.

NoSmoking · 08/08/2011, 23h16

Citation:

Envoyé par johnb

J'ai trouvé le lien suivant sur le site du support Microsoft indiquant qu'un BUG existe dans IE concernant la propriété "innerHTML" des objets de type "select":

perso je ne considère pas cela comme un BUG

Il n'est qu'à essayer ce code pour voir que le comportement de IE est préférable à celui de FireFox

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
</head>
<body>
<select id="leselect">
  <option>Option</option>
</select>
<script type="text/javascript">
  var oElem = document.getElementById('leselect');
  var sHtml = '<select><option>Insertion<\/option><\/select>';
  oElem.innerHTML = sHtml;
</script>
</body>
</html>

08/08/2011, 14h21	#4
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	Bonjour, ceci dit, les listes déroulantes liées avec Ajax, c'est bien ! - Web 2.0, allez plus loin avec AJAX et XMLHttpRequest -> Listes liées __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

08/08/2011, 13h23	#3
Auteur Expert Confirmé Sénior Inscription : avril 2004 Messages : 4 794 Détails du profil Informations personnelles : Localisation : France Informations forums : Inscription : avril 2004 Messages : 4 794 Points : 5 118 Points : 5 118	bonjour, ne pas utiliser innerHTML pour créer une liste !!!!! Utilise les fonctions DOM : http://javascript.developpez.com/tut...ge=page_5#LV-B
	00

08/08/2011, 16h11	#5
johnb Invité de passage Inscription : août 2011 Messages : 4 Détails du profil Informations forums : Inscription : août 2011 Messages : 4 Points : 1 Points : 1	Je vous remercie pour vos réponses. Pour répondre à "Sharcoux": Cette syntaxe ne permet pas de corriger le problème, j'ai exactement le même comportement. J'ai trouvé le lien suivant sur le site du support Microsoft indiquant qu'un BUG existe dans IE concernant la propriété "innerHTML" des objets de type "select": http://support.microsoft.com/default...b;en-us;276228 J'ai pu faire fonctionner mon code en utilisant leur solution de contournement, à savoir encapsuler l'objet "select" dans une division <div id="nomdiv"></div> et en modifiant la propriété "innerHTML" de la division "nomdiv" et non directement celle de l'objet "select". Si j'ai du temps par la suite j'essaierai de mettre en place une autre solution, comme l'utilisation des fonctions DOM proposé plus haut, qui parait tout de même plus propre.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email