Problème innerhtml avec IE

**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):

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:

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

Invité · 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

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>

Problème innerhtml avec IE

JavaScript

Discussions similaires

Partager

Partager