Liste déroulante dynamique en Javascript

**avajscript** · 22/10/2014, 11h43

Bonjour à tous,

Je précise que je débute en javascript.

Mon petit projet

J'ai créé une fonction associée à un tableau qui créé des listes déroulantes dynamiquement
en fonction des entrées dans mon tableau. Par exemple si j'ajoute une entrée à mon tableau, ma fonction créera une nouvelle liste déroulante automatiquement.

Problème rencontré

Le souci, c'est qu'à l'affichage, j'ai un "Undefined" qui s'affiche suivi de mes listes déroulantes et je pense qu'il me manque encore des notions de syntaxe pour supprimer le "Undefined".

Code source du projet

Je joint à ce topic mes 3 fichiers sources comme cela vous verrez le résultat par vous même et vous trouverez ce qui pose problème.

J'affiche ci-dessous mon code source pour ceux qui ne veulent pas télécharger mes fichiers :

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" media="screen" href="styles.css" type="text/css"/>
</head>
<body>
 
<!-- Listes déroulantes -->
<div id="listederoul"></div>
 
 
<!-- code JS -->
<script src="code.js"></script>
 
</body>
</html>

JAVASCRIPT

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
// Création du tableau contenu dans chaque listes déroulantes
listePays = new Array();
listePays[0] = "Italie";
listePays[1] = "Portugal";
listePays[2] = "France";
listePays[3] = "Brésil";
listePays[4] = "Espagne";
listePays[5] = "Allemagne";
listePays[6] = "Angleterre";
 
// Fonction permettant la création dynamique des listes déroulantes
function mesListes(){
	var i, j;
	document.write("<form id=\"listes\" name=\"listes\">");
// début création dynamique des listes déroulantes
	for (i=1; i<=listePays.length; i++){
		document.write("<span id=\"numero"+i+"\">"+i+"</span> - <select name=\"liste"+i+"\"><option value=\"\">Choisir...</option>");
// début création du contenu des listes dynamiques en fonction du tableau listePays
		for (j=0; j<listePays.length; j++){
			document.write("<option value=\""+listePays[j]+"\">"+listePays[j]+"</option>");}
// fin création du contenu des listes dynamiques en fonction du tableau listePays
		document.write("</select><br>");
	}
	document.write("</form>");
}
document.getElementById("listederoul").innerHTML = mesListes();
// fin création dynamique des listes déroulantes

CSS

Code css :

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

1
2
3
body {font-family:Verdana,Arial,Sans; font-size:13px; background:#CCCCCC;}
 
#listederoul {display:inline-block;}

Merci par avance pour votre aide !

Liste déroulante dynamique en Javascript

JavaScript

Mode arborescent

Discussions similaires

Partager

Partager