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 !

**SpaceFrog** · 22/10/2014, 15h58

il vaudrait mieux que tu perdes les mauvaise habitudes dès le départ

Code :

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

document.write

http://blog.developpez.com/web/p1065..._en_javascript

**avajscript** · 22/10/2014, 16h10

merci pour l'info, sur un autre forum on m'a bien aidé et du coup j'ai supprimé tous les document.write et j'ai plutôt créer une variable html = ""; puis j'ai supprimer tous les document.write dans ma fonction que j'ai remplacé par des html += "mon contenu html"

et en fin de fonction j'ai fait un : return html; et le tour était joué.

**bluche** · 24/10/2014, 12h38

Bonjour,
Pouvez-vous joindre les fichiers finaux permettant apres correction le bon fonctionnement.
Salutations.

Liste déroulante dynamique en Javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager