3 pièce(s) jointe(s)
Liste déroulante dynamique en Javascript
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:
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:
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:
1
2
3
| body {font-family:Verdana,Arial,Sans; font-size:13px; background:#CCCCCC;}
#listederoul {display:inline-block;} |
Merci par avance pour votre aide !
Création dynamique des listes déroulantes
Bonjour,
Pouvez-vous joindre les fichiers finaux permettant apres correction le bon fonctionnement.
Salutations.
