IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Liste liées avec IE et innerhtml


Sujet :

JavaScript

  1. #1
    Membre actif Avatar de greg91
    Homme Profil pro
    Administrateur système
    Inscrit en
    Novembre 2007
    Messages
    121
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : France

    Informations professionnelles :
    Activité : Administrateur système

    Informations forums :
    Inscription : Novembre 2007
    Messages : 121
    Points : 208
    Points
    208
    Par défaut Liste liées avec IE et innerhtml
    Bonjour à tous,

    Voilà plusieurs jours que je cherche une solution pour une liste lié qui fonctionne parfaitement sur tous les navigateurs sauf évidement sur IE .

    J'ai bien vue que innerHTML posait problème avec IE, j'ai vue plein de solutions que j'ai j'ai testées, mais je n'arrive à rien de fonctionnel

    - Une première liste permet de choisir une situation (situation_1 ou situation_2)
    - Une deuxième liste permet de choisir une question en fonction de la situation (question_1 à question_4)
    - Sous FF la liste de question apparait bien, sous IE il n'y a aucun affichage

    Je suis très moyen (mauvais ?) en javascript, si quelqu'un pouvait m'aider

    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
     
    <script type="text/javascript">
    /**
     * Affiche la liste de questions correspondant à la situation choisie
     */
    function rafraichirListeQuestions(situation) {
        /* Remplace le contenu de la liste des questions par le contenu de la liste portant l'id correspondant à la situation donnée */
        document.getElementById("question").innerHTML = document.getElementById(situation).innerHTML;
        }
    </script>
     
     
    <form action="valider.php" method="post" name="contact" >
        <select name="situation" id="situation" onchange="rafraichirListeQuestions(this.options[this.options.selectedIndex].value);">
            <option value="">(Choisir une situation)</option>
    	<option value="situation_1">Situation 1</option>
    	<option value="situation_2">Situation 2</option>
        </select>
     
        <label for="question">Votre question</label>
        <select name="question" id="question" >
        </select>
     
    </form>
     
    <!-- Div caché des listes de questions -->
    <div id="listes_questions" style="display:none">
        <select name="situation_1" id="situation_1" >
            <option value="">(Choisir une question)</option>
            <option value="question_1">Question 1</option>
            <option value="question_2">Question 2</option>
        </select>
        <select name="situation_2" id="situation_2" >
            <option value="">(Choisir une question)</option>
            <option value="question_3">Question 3</option>
            <option value="question_4">Question 4</option>
        </select>
    </div>
    J'ai compris que je devais regarder document.createElement ainsi que appendChild. Mais honnêtement, ça dépasse mon champ de compétences

  2. #2
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221
    Par défaut
    concrètement, tu n'insères aucune "<option>" dans ta deuxième liste!
    le vois-tu?

  3. #3
    Membre émérite
    Avatar de Eric2a
    Homme Profil pro
    Technicien
    Inscrit en
    Septembre 2005
    Messages
    1 225
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Technicien

    Informations forums :
    Inscription : Septembre 2005
    Messages : 1 225
    Points : 2 411
    Points
    2 411
    Par défaut
    Salut,

    Essaie ceci (Testé avec IE8).

    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
    67
    68
    69
    70
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Listes liées</title>
    <script type="text/javascript">//<![CDATA[
    	/**
    	* Affiche la liste de questions correspondant à la situation choisie
    	*/
    	function rafraichirListeQuestions(){
    		var quest=[],elt,opt,v,list=null,i;
     
    		// Elements (valeurs / questions) correspondant à la première situation
    		quest['situation_1']={
    			val:['question_1','question_2'],
    			txt:['Première question','Deuxième question']
    		}
    		// Elements (valeurs / questions) correspondant à la deuxième situation
    		quest['situation_2']={
    			val:['question_3','question_4'],
    			txt:['Troisième question','Quatrième question']
    		}
     
    		// Liste déroulante
    		elt=document.getElementById('question');
     
    		// Supprime le contenu de la liste déroulante
    		while(elt.hasChildNodes())elt.removeChild(elt.lastChild);
     
    		// Créé et ajoute l'élément vide sélectionné par défaut de la liste déroulante
    		opt=document.createElement('option');
    		opt.setAttribute('value','');
    		opt.appendChild(document.createTextNode('(Choisir une question)'));
    		elt.appendChild(opt);
     
    		// Obtenir la situation actuellement sélectionnée
    		v=document.getElementById('situation').value;
    		if(v){
    			list=(typeof quest[v]!==undefined)?quest[v]:null;
    		}
    		if(!list)return false;
     
    		// Créé et ajoute les éléments de la liste déroulante
    		for(i=0;i<list.val.length;i++){
    			opt=document.createElement('option');
    			opt.setAttribute('value',list.val[i]);
    			opt.appendChild(document.createTextNode(list.txt[i]));
    			elt.appendChild(opt);
    		}
    	}
    //]]>
    </script>
    </head>
    <body>
    <form action="valider.php" method="post" name="contact">
    	<p>
    		<select name="situation" id="situation" onchange="rafraichirListeQuestions();">
    			<option value="" select="selected">(Choisir une situation)</option>
    			<option value="situation_1">Situation 1</option>
    			<option value="situation_2">Situation 2</option>
    		</select>
    		<label for="question">Votre question</label>
    		<select name="question" id="question" >
    			<option value="">(Choisir une question)</option>
    		</select>
    	</p>
    </form>
    </body>
    </html>

  4. #4
    Membre actif Avatar de greg91
    Homme Profil pro
    Administrateur système
    Inscrit en
    Novembre 2007
    Messages
    121
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : France

    Informations professionnelles :
    Activité : Administrateur système

    Informations forums :
    Inscription : Novembre 2007
    Messages : 121
    Points : 208
    Points
    208
    Par défaut
    concrètement, tu n'insères aucune "<option>" dans ta deuxième liste!
    le vois-tu?
    Heu non, je ne voie pas mon erreur

    Eric2a :

    Salut,
    Essaie ceci (Testé avec IE8).
    ....
    Énorme merci Eric2a cela fonctionne parfaitement sous IE7, IE8 et FF !
    Tu m'enlève une grosse épine du pied.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [MySQL] 3 listes liées avec PHP/MYSQL
    Par sadigoun dans le forum PHP & Base de données
    Réponses: 12
    Dernier message: 22/10/2008, 13h41
  2. Listes liées avec rechargement spécifique
    Par jpascal dans le forum Langage
    Réponses: 2
    Dernier message: 05/04/2008, 03h32
  3. [AJAX] Listes liées avec Ajax
    Par Zak_92 dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 15/08/2007, 13h19
  4. [1.0.12]Listes liées avec Javascript
    Par slim dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 5
    Dernier message: 09/06/2007, 00h07
  5. [AJAX] Listes liées
    Par oranocha dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 13/02/2007, 07h59

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo