Génération de SELECT

Version imprimable

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:

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:

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

2nd alert :

Code:

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

Quelqu'un aurait-il une explication logique ?

04/04/2011, 17h23
nadox

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 ??
04/04/2011, 17h30
Dave Lopeur

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

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:

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.

05/04/2011, 08h59
Dave Lopeur

je vais tenter les 2, je verrais bien ce qui marche...
05/04/2011, 12h53
Auteur

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.:roll:

Bonsoir,

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

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