ajout dynamique d'options à une liste

**Kerrisson** · 19/04/2007, 09h45

Bonjour à tous.

Dans le cadre de mon stage de dois faire un site web et j'ai un petit problème avec des listes.

En fait, pour le formulaire d'inscription sur le site, je dois demander la date de naissance avec 3 listes : une pour le jour, une pour le mois et la derniere pour l'année. (je sais ca aurait été beaucoup plus simple de demander à l'utilisateur de rentrer la date sous un format imposé, mais les listes sont imposés hélas)

Mon problème est que pour les jours et les années j'aimerai générer ça dynamiquement (surtout pour les années, je me vois mal écrire en dur dans le code toutes les années de 1960 à maintenant). J'ai déjà tenter plusieurs facon de l'écrire en Javascript mais aucune ne réussi.

Mon code source .html

Code html :

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
 
<html>
<head>
<script type="text/javascript" src="form_fr.js"></script>
<body>
<h2> <center> Enregistrer un nouvel utilisateur </center></h2> 
Cr&eacute;ez vous un compte gratuit.</br>
Compl&eacute;tez le formulaire avec vos donn&eacute;es personnelles.</br>
 
<form method="POST" action="" id="inscription_form">
	<TABLE width="550" border="0" cellpadding="0" cellspacing="0" >
		<TR>
			<TD>Prenom  </TD>
			<TD><input type="text" name="firstname" /></TD>
		</TR>
		<TR>
			<TD>Nom</TD>
			<TD><input type="text" name="name" /></TD>
		</TR>
		<TR>
			<TD>Sexe</TD>
			<TD><SELECT name="sex" size="1">
					<OPTION value="men">homme</option>
					<OPTION value="women">femme</option>
				</SELECT>
			</TD>
		</TR>
		<TR>
			<TD>Date de naissance</TD>
			<TD> <SELECT id="lst_day" name="lst_day" size="1">
					<OPTION value="0">Jour</option>
 
				</SELECT>
 
				<SELECT id="lst_month" name="lst_month" size="1">
					<OPTION value="0">Mois</option>
					<option value="janvier">janvier</option>
					<option value="fevrier">f&eacute;vrier</option>
					<option value="mars">mars</option>
					<option value="avril">avril</option>
					<option value="mai">mai</option>
					<option value="juin">juin</option>
					<option value="juillet">juillet</option>
					<option value="aout">aout</option>
					<option value="septembre">septembre</option>
					<option value="octobre">octobre</option>
					<option value="novembre">novembre</option>
					<option value="decembre">d&eacute;cembre</option>
				</SELECT>
 
				<SELECT id="lst_year" name="lst_year" size="1">
					<OPTION value="0">Année</option>
				</SELECT>
			</TD>
		</TR>
        </table>
</form>
 
</body>
</html>

Mon code source .js avec les différents test

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
 
var lst_day = document.getElementById("lst_day")
var lst_year = document.getElementById("lst_year")
var form = document.getElementById("inscription_form")
 
function load() {
 
var i;
var j;
 
	/*for(i=1,i<31,i++)
	{
		var type = document.form.lst_day.options[document.form.lst_day.selectedIndex].value;
		var noeud_element = document.createElement(type);
		var noeud_texte = document.createTextNode(document.form.lst_day.value);
		noeud_element.appendChild(noeud_texte);
		document.lst_day.appendChild(noeud_element);
 
	}*/
 
	/*for(i=1,i<31,i++)
	{
		 var nouvel_element = new Option(form.lst_day.text,form.lst_day.value);
		 nouvel_element.value = i;
		 nouvel_element.text = i;
		 form.lst_day.options = nouvel_element; 
	}*/
 
/* 	for(i=1,i<31,i++)
	{
		opt  = document.createElement ("option");
		opt.value=i;
		opt.text=i;
		lst_day.appendChild(opt)
	} */
 
	for(i=1,i<31,i++)
	{
	var s = document.forms["inscription_form"].elements["lst_day"];
 	s.options[s.options.length] = new Option(i);
	}
}
 
window.onLoad=load

Si quelqu'un à une idée, merci d'avance.