Créer une liste déroulante dynamique

Version imprimable

Bonjour,
J'ai un formulaire, ou l'utilisateur doit saisir dans une liste déroulante une valeur allant de 1 à 4.
Je voudrais que lorsque l'utilisateur choisi 2 : il m'affiche deux listes déroulantes à coté, si il choisit 3, que ca m'affiche trois listes déroulantes à coté.
Mon code pour l'instant est très mince :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script type="text/javascript"> var i = 1; $(document).ready(function () { $("#jour" ).change(function () { var l1 = $("#jour" ).val(); if(l1 = 2) { code pour insérer deux listes déroulantes } ); }); </script>
Je ne vois pas du tout ce que je peux mettre pour créer mes listes déroulantes
Merci de votre aide.

Ceci te convient ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
$(document).ready(function () {
	$("#jour" ).change(function () {
		var l1 = $("#jour" ).val();
		// On vide la zone
		$("#genere_select").html("");
		for (i=1; i<=l1; i++)
		{
			$("#genere_select").append("<select name='...'><option value='...'>...</option></select>");
		}
	);
});
</script>
<div id="genere_select"></div>

Merci pour votre réponse rapide.
Mais cela ne fonctionne pas :(
Voici le code de ma liste déroulante :

Code:

1
2
3
4
5
6
7
 
<select id="jour" name="jour">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
	</select>

Le code lié à cette liste :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<script type="text/javascript">
$(document).ready(function () {
var i = 1;
	$("#jour" ).change(function () {
		var l1 = $("#jour" ).val();
		// On vide la zone
		$("#genere_select").html("");
		for (i=1; i<=l1; i++)
		{
			$("#genere_select").append("<select name='bidule'><option value='bidule'>bidule</option></select>");
		}
	);
});
</script>

Et mon div :

Code:

1
2
3
 
<div id="genere_select">
</div>

19/11/2010, 11h53
Meloooo

Enorme erreur de ma part !!
J'avais oublié de fermé accolade et parenthèse ! Honte à moi lol
En tout cas merci pour votre réponse clair rapide et précise :)

Bonsoir

Voici un meilleur exemple avec les commentaires par rapport à la solution proposée :

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
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
		select.bidule {
			float:left;
			margin:12px;
		}
		#affiche {
			clear:both;
		}
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
<select id="jour">
	<option selected="selected" value="1">Un</option>
	<option value="2">Deux</option>
	<option value="3">Trois</option>
	<option value="4">Quatre</option>
</select>
<div id="genere_select"></div>
<div id="affiche"></div>
	</div> 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script>
		$(function(){
			/*
			 * Exemple d'interaction avec les selects bidule.
			 *
			 * Il faut utiliser delegate et non live qui est moins rapide
			 * et qui sera sans doute obsolète un jour.
			 *
			 * delegate http://api.jquery.com/delegate/
			 */
			$("#genere_select").delegate("select", "change", function(){
				$("#affiche").append("<p>id = " + this.id + ", value = " + $(this).val() + ", option texte = " + $(this).children(":selected").text() + "</p>");
			});
 
			$("#jour").change(function(){
				/*
				 * $("#jour").val() donne un travail inutile
				 * à jQuery qui fournit déjà this
				 */
				var n = parseInt($(this).val(), 10);
 
				/*
				 * Pas indispensable, mais une bonne pratique
				 */
				if (!isNaN(n) && n > 0){
					/*
					 * On vide la zone
					 * 
					 * Oui html("") fait le travail, mais empty() est prévu pour ce cas
					 *
					 * Performance !
					 * Lorsque l'on modifie fortement un fragment du DOM il est recommandé
					 * de détacher le fragment avant de le modifier et de le remettre
					 * en place dans le DOM.
					 * 
					 * detach() http://api.jquery.com/detach/
					 */
 
					var obj = $("#genere_select").detach();
 
					obj.empty();
					$("#affiche").empty();
 
					/*
					 * Performance !
					 * On n'ajoute pas de nouveaux fragments du DOM dans une boucle !
					 */
 
					var tab = [];
 
					// var i !
					for (var i = 0; i < n; i++){
						tab.push("<select class='bidule' id='bidule" + i +"'>" +
								 "<option selected='selected' value='bidule" + i +"0'>bidule " + i + "0</option>" +
								 "<option value='bidule" + i +"1'>bidule " + i + "1</option>" +
								 "<option value='bidule" + i +"2'>bidule " + i + "2</option>" +
								 "<option value='bidule" + i +"3'>bidule " + i + "3</option>" +
								 "<option value='bidule" + i +"4'>bidule " + i + "4</option>" +
								 "</select>");
					}
 
					/*
					 * On remplit le fragment du DOM et on le remet en place
					 * insertAfter() http://api.jquery.com/insertAfter/
					 */
 
					obj.append(tab.join("")).insertAfter("#jour");
				}
			});
		});
 	</script>
</body>  
</html>

@scourjean, je suis heureux de vous voir participer et répondre aux questions, je vous en remercie, mais avec un petit bémol. C'est bien de donner une solution rapide, mais c'est mieux de donner le bon exemple.

Certes, cela demande beaucoup de travail et des tests pour s'assurer que l'exemple est fonctionnel et l'on n'a pas le temps de répondre à plusieurs questions le même jour. Mais on ne donne pas seulement une réponse à un cas particulier, le forum est aussi une base de connaissances, plusieurs forumeurs ou forumeuses liront votre réponse. On se doit de donner le meilleur exemple possible.

22/11/2010, 09h59
Meloooo

Bonjour,
Merci pour votre réponse, tout ceci fonctionne et je comprends "à peu près" votre code, excepté peut être la dernière ligne, qui est un peu flou.
Autre petite question (je sais que la discussion est mise en résolu) :
Par la suite dans la même page, je souhaite récupérer les valeurs de mes listes déroulantes, pour les insérer dans une base de données... Avez-vous une solution ?
Merci
22/11/2010, 20h46
danielhagnoul
Bonsoir
Code:

1 2 3 4 5 /* * On remplit le fragment du DOM et on le remet en place * insertAfter() http://api.jquery.com/insertAfter/ */ obj.append(tab.join("")).insertAfter("#jour");
On remplit (append) le fragment du DOM (obj) ave le contenu de tab. C'est un simple array et tab.join("") en récupère le contenu, c'est du JavaScript normal. Puis on installe le fragment du DOM (obj) dans le DOM par insertAfter.

Pour collecter les informations contenues dans un formulaire, voir : http://api.jquery.com/serialize/

Bonjour,
Merci de votre réponse, j'avais déjà essayer de bidouiller voici le code :
Code:

1 2 3 4 5 6 7 8 function executeSample() { var _liste = document.getElementById("list").value; var _data = "list="+_liste; callScript("traitement.php",_data); };
Et traitement.php :
Code:

1 2 3 4 5 6 7 8 9 10 if ( isset($_POST["list"]) && !empty($_POST["list"]) ) $ma_liste = $_POST["list"]; else $ma_liste = null; // --- Exécution du traitement if ( $ma_liste != null ){ echo "alert('".$ma_liste."')"; }
J'ai bien mon alert, mais seulement de la première liste déroulante, et pas des autres....

Bonsoir

Voici l'exemple modifier pour l'utilisation de serialize (voir les commentaires du code) :

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
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
		select.bidule {
			float:left;
			margin:12px;
		}
		#affiche {
			clear:both;
		}
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
<form>
    <select id="jour" name="jour">
        <option selected="selected" value="1">Un</option>
        <option value="2">Deux</option>
        <option value="3">Trois</option>
        <option value="4">Quatre</option>
    </select>
    <div id="genere_select"></div>
    <input id="selectSubmitID" type="submit" name="submit" value="Submit"/>
</form>
 
<div id="affiche"></div>
 
	</div> 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script>
		$(function(){
			$("#genere_select").delegate("select", "change", function(){
				$("#affiche").append("<p>id = " + this.id + ", value = " + $(this).val() + ", option texte = " + $(this).children(":selected").text() + "</p>");
			});
 
			$("#jour").change(function(){
				var n = parseInt($(this).val(), 10);
 
				if (!isNaN(n) && n > 0){
					var obj = $("#genere_select").detach();
 
					obj.empty();
					$("#affiche").empty();
 
					var tab = [];
 
                    // ajout de l'attribut name au select
 
					for (var i = 0; i < n; i++){
						tab.push("<select class='bidule' id='bidule" + i +"' name='bidule" + i +"'>" +
								 "<option selected='selected' value='bidule" + i +"0'>bidule " + i + "0</option>" +
								 "<option value='bidule" + i +"1'>bidule " + i + "1</option>" +
								 "<option value='bidule" + i +"2'>bidule " + i + "2</option>" +
								 "<option value='bidule" + i +"3'>bidule " + i + "3</option>" +
								 "<option value='bidule" + i +"4'>bidule " + i + "4</option>" +
								 "</select>");
					}
 
					obj.append(tab.join("")).insertAfter("#jour");
				}
			});
 
            /*
             * serialize travaille sur les attributs name
             * le code précédent a donc été modifié
             *
             * exemple, contenu de data pour trois select dans la division genere_select
             * jour=2&bidule0=bidule00&bidule1=bidule11
             */
            $("#selectSubmitID").click(function(){
                var objForm = $(this).parents("form"),
                    data = objForm.serialize();
 
                $.post("traitement.php", data, function(){
                    // traitement de la réponse du serveur
                });
 
                return false; // important !
            });
		});
 	</script>
</body>  
</html>

Bonjour,
Désolé de répondre aussi tard, mais vaut mieux tard que jamais comme on dit.
J'ai modifié quelques lignes de code par rapport à celui que vous m'avez fourni :
Code:

1 2 3 4 5 6 7 8 $("#selectSubmitID").click(function(){ var objForm = $(this).parents("#form"), data = objForm.serialize(); $.post('index.php', function(data) { });
Et cela à priori fonctionne !
Merci de votre aide.