Génération de SELECT

Dave Lopeur · 04/04/2011, 16h45

Bonjour,

j'ai un souci incompréhensible lors de la génération d'un SELECT.
Mon code de génération 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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
  <HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <SCRIPT>
      function chargeAnnees() {
        var dateEC = new Date();
 
        var anneeEC = dateEC.getFullYear();
        var options = "<OPTION VALUE=''></OPTION>";
 
        for (i=2010; i<=anneeEC; i++) {
          options += "<OPTION VALUE='"+i+"'>"+i+"</OPTION>";
        }
        document.getElementById('anneeDeb').innerHTML = options;
        alert(options);
        alert(document.getElementById('anneeDeb').innerHTML);
      }
    </SCRIPT>
  </HEAD>
 
  <BODY onLoad="chargeAnnees();">
    <FORM ACTION="informations.php" METHOD="post">
      <CENTER>
        <TABLE>
          <TR>
            <TD align="left">&nbsp;<br>Date de la premi&egrave;re saisie </TD>
            <TD>
              <TABLE>
                <TR>
                  <TD align="left" style="font-size: 10px;">Année</TD>
                  <TD align="left" style="font-size: 10px;">Mois</TD>
                  <TD align="left" style="font-size: 10px;">Jour</TD>
                </TR>
                <TR>
                  <TD>
                    <SELECT NAME="anneeDeb" ID="anneeDeb">
                    </SELECT>
                  </TD>
                  <TD>
                    <SELECT NAME="moisDeb" ID="moisDeb">
                      <OPTION VALUE="Avril">Avril</OPTION>
                    </SELECT>
                  </TD>
                  <TD>
                    <SELECT NAME="jourDeb" ID="jourDeb">
                      <OPTION VALUE="4">4</OPTION>
                    </SELECT>
                  </TD>
                </TR>
              </TABLE>
            </TD>
          </TR>
        </TABLE>
      </CENTER>
    </FORM>
  </BODY>
</HEAD>

(les alert ne sont là que pour le DEBUG)

Dans le onLoad j'appelle donc la fonction servant à générer les années depuis 2010 jusqu'à aujourd'hui.
Sous Firefox, ça fonctionne mais pas sous IE.

Sous IE, mes alerts m'affichent ceci :
1er alert :

Code :

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

<OPTION VALUE=''></OPTION><OPTION VALUE='2010'>2010</OPTION><OPTION VALUE='2011'>2011</OPTION>

2nd alert :

Code :

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

2010</OPTION><OPTION VALUE='2011'>2011</OPTION>

Quelqu'un aurait-il une explication logique ?

nadox · 04/04/2011, 17h23

Bonjour,

IE ne gère pas bien du tout la méthode "innerHTML" sur les éléments select.

Il faut, soit construire le select en DOM(à mon sens la méthode la plus propre...), soit faire le innerHTML du select complet dans l'élément contenant(ce qui reste possiblement buggé, je crois).

Hors-sujet(ou pas) : Comment on peut faire du xHtml Strict avec des balises en Majuscule ??

Dave Lopeur · 04/04/2011, 17h30

N'y a-t-il pas un autre moyen que le DOM (que je ne connais pas du tout?)

nadox · 04/04/2011, 18h10

La construction en DOM n'est pas très compliqué à prendre en main si on connaît HTML.

Pour créé un select à partir d'un tableau javascript, par exemple :

Code javascript :

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
function createSelect(idContainer, idNewSelect, tabOptions) {
    var nbOptions = tabOptions.length;
    var container = document.getElementById(idContainer); // on récupère l'élément cible.
    var newSelect = document.createElement("select"); // on créé un nouvel élément select
    newSelect.id = idNewSelect; // on affecte son attribut id.
    for (var i=0 ; i<nbOptions ; i++) {
        var newOption = document.createElement("option"); // création d'un élément option
            newOption.value = tabOptions[i]; // affectation de son attribut value
            var newOptionTxt = document.createTextNode(tabOptions[i]); // création du texte de l'option
            newOption.appendChild(newOptionTxt); // on injecte le texte dans l'option
        newSelect.appendChild(newOption); // on injecte l'option dans le select
    }
    container.appendChild(newSelect); // on injecte le select dans l'élément cible
}
 
var mesValeurs = ["2010","2011"];
window.onload = function() {
    createSelect("anneeContainer","anneeSelect",mesValeurs);
};

Voilà pour le principe.

Sinon comme dit au dessus, on peut créer le select complet en innerHTML sur l'élément conteneur.

Dave Lopeur · 05/04/2011, 08h59

je vais tenter les 2, je verrais bien ce qui marche...

Auteur · 05/04/2011, 12h53

Citation:

Envoyé par Dave Lopeur

je vais tenter les 2, je verrais bien ce qui marche...

Les fonctions du DOM te donnerons toujours un meilleur résultat que innerHTML.

Et apprendre à utiliser correctement ces fonctions ce n'est pas sorcier.

andry.aime · 05/04/2011, 17h52

Bonsoir,

Pour créer des options, le mieux c'est de faire

Code :

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

1
2
  var newOption = new Option(ltabOptions[i]), tabOptions[i]);
             newSelect.options[newSelect.length]=newOption ;

A+.

04/04/2011, 17h23	#2
nadox Membre expérimenté Développeur Inscription : février 2010 Messages : 360 Détails du profil Informations personnelles : Sexe : Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : Développeur Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2010 Messages : 360 Points : 545 Points : 545	Bonjour, IE ne gère pas bien du tout la méthode "innerHTML" sur les éléments select. Il faut, soit construire le select en DOM(à mon sens la méthode la plus propre...), soit faire le innerHTML du select complet dans l'élément contenant(ce qui reste possiblement buggé, je crois). Hors-sujet(ou pas) : Comment on peut faire du xHtml Strict avec des balises en Majuscule ??
	00

04/04/2011, 17h30	#3
Dave Lopeur Futur Membre du Club Responsable de projet fonctionnel Inscription : mars 2006 Messages : 41 Détails du profil Informations personnelles : Sexe : Âge : 28 Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Responsable de projet fonctionnel Secteur : Distribution Informations forums : Inscription : mars 2006 Messages : 41 Points : 15 Points : 15	N'y a-t-il pas un autre moyen que le DOM (que je ne connais pas du tout?)
	00

05/04/2011, 08h59	#5
Dave Lopeur Futur Membre du Club Responsable de projet fonctionnel Inscription : mars 2006 Messages : 41 Détails du profil Informations personnelles : Sexe : Âge : 28 Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Responsable de projet fonctionnel Secteur : Distribution Informations forums : Inscription : mars 2006 Messages : 41 Points : 15 Points : 15	je vais tenter les 2, je verrais bien ce qui marche...
	00

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