Génération de SELECT

**Dave Lopeur** · 04/04/2011, 17h45

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, 18h23

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, 18h30

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

**nadox** · 04/04/2011, 19h10

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, 09h59

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

**Auteur** · 05/04/2011, 13h53

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, 18h52

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+.

Génération de SELECT

JavaScript

Discussions similaires

Partager

Partager