Créer une liste déroulante dynamique

**Meloooo** · 19/11/2010, 11h44

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 :

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

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.

**scourjean** · 19/11/2010, 11h59

Ceci te convient ?

Code :

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

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>

**Meloooo** · 19/11/2010, 12h08

Merci pour votre réponse rapide.
Mais cela ne fonctionne pas

Voici le code de ma liste déroulante :

Code :

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

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 :

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

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 :

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

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

**Meloooo** · 19/11/2010, 12h53

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

**danielhagnoul** · 19/11/2010, 23h38

Bonsoir

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

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
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.

**Meloooo** · 22/11/2010, 10h59

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

**danielhagnoul** · 22/11/2010, 21h46

Bonsoir

Code :

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

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/

**Meloooo** · 23/11/2010, 10h59

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

Code :

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

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 :

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

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....

**danielhagnoul** · 26/11/2010, 00h27

Bonsoir

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

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
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>

**Meloooo** · 15/12/2010, 18h02

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 :

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

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.

Créer une liste déroulante dynamique

jQuery

Discussions similaires

Partager

Partager