Combobox et listes associées

**Rogellino** · 13/09/2017, 22h49

Bonjour à tous,

J'espère être sur le bon forum, vous me direz. J'ai un Jquery qui me construit un bloc de deux combos. A gauche ma base me donne les valeurs d'une table (id et nom), à droite une combo vide.

Au milieu des boutons pour envoyer de g à dr et vice versa les "options du select" de l'une vers l'autre.

J'ai trois autres blocs dans ma page construits de la même manière.

Tout va bien, les options vont et viennent. Au final, une fois que les quatre listes d'options sont créées à droite, je voudrais avoir quatre array lstBox_a à lstBox_d, avec, pour chacune la liste des id et noms résidents (ma fonction ne me poste qu'un seul élément, même si j'en sélectionne plusieurs et ne provenant que d'un des quatre blocs :-( ).

Si ma fonction clone les options du select d'un côté et de l'autre comment intégrer, parallèlement, la construction ou la réduction des array ?

Voici mon jquery, trouvé sur le net et modifié pour différencier les quatre blocs (+i...) :

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
(function () {
 
 
                        jQuery("td.btn").each( function(i,el) {
 
                            $('#btnRight'+i*2).click(function (e) {
                                var selectedOpts = $('#lstBox'+i*2+' option:selected');
                                if (selectedOpts.length == 0) {
                                    alert("aucune option sélectionnée.");
                                    e.preventDefault();
                                }
                                $('#lstBox'+(i*2+1)).append($(selectedOpts).clone());
                                $(selectedOpts).remove();
                                e.preventDefault();
                            });
 
                            $('#btnAllRight'+i*2).click(function (e) {
                                var selectedOpts = $('#lstBox'+i*2+' option');
                                if (selectedOpts.length == 0) {
                                    alert("aucune option sélectionnée.");
                                    e.preventDefault();
                                }
                                $('#lstBox'+(i*2+1)).append($(selectedOpts).clone());
                                $(selectedOpts).remove();
                                e.preventDefault();
                            });
 
                            $('#btnLeft'+i*2).click(function (e) {
                                var selectedOpts = $('#lstBox'+(i*2+1)+' option:selected');
                                if (selectedOpts.length == 0) {
                                    alert("aucune option sélectionnée.");
                                    e.preventDefault();
                                }
                                $('#lstBox'+i*2).append($(selectedOpts).clone());
                                $(selectedOpts).remove();
                                e.preventDefault();
                            });
 
                            $('#btnAllLeft'+i*2).click(function (e) {
                                var selectedOpts = $('#lstBox'+(i*2+1)+' option');
                                if (selectedOpts.length == 0) {
                                    alert("aucune option sélectionnée.");
                                    e.preventDefault();
                                }
                                $('#lstBox'+i*2).append($(selectedOpts).clone());
                                $(selectedOpts).remove();
                                e.preventDefault();
                            });
 
                        });

Pourriez-vous m'aider ? Merci d'avance et bonne soirée à tous...

**Toufik83** · 14/09/2017, 19h14

Envoyé par Rogellino

(ma fonction ne me poste qu'un seul élément, même si j'en sélectionne plusieurs et ne provenant que d'un des quatre blocs

est ce que ces éléments ont été crées dynamiquement ? via php ou jquery par exemple?

**Rogellino** · 15/09/2017, 13h01

Bonjour,

Merci beaucoup pour ton message.
Oui, en effet, via ce code et une fonction "createCombo" :

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
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
114
115
116
117
118
119
120
121
<html>
					<article class="form-style-5">
						<div>
							<form name="editFormNom" action="traite_organise_menu.php" id="editForm" method="post" enctype="multipart/form-data">
								<?php include "fiche_logo.html";?>
								<!-- NOM DU MENU -->					
								<fieldset>
								<legend><span class="number">*</span> <?php echo 'Nom du menu : '.$nom_plat; ?></legend>
 
								</fieldset>
						</div>
 
						<?php
                                                
                                                        $label_rang = [ "premier", "deuxième", "troisième", "quatrième", "cinquième" ];
                                                
                                                        for( $i=0; $i<8; $i=$i+2 ) {
                                                                
                                                                echo '<div><fieldset>
                                                                        <label for="nom_rang">Choix du '.$label_rang[$i/2].' rang</label>'.
                                                                        createCombo("SELECT * FROM rang where id_lang = 1", "nom-rang".$i, "form-style-53", 0, "id_rang", "nom_rang" ).'
                                                                </fieldset></div>';
                                                                
                                                                echo '<table>
                                                                        <tr>
                                                                                <td class="firstList">'.createCombo(
                                                                                                        "SELECT id_plat, nom_plat FROM plats WHERE id_type_plat NOT IN (1, 2, 9, 11) AND id_lang = 1 ORDER BY id_cat, nom_plat",
                                                                                                        "lstBox".$i,
                                                                                                        "col_double",
                                                                                                        1,
                                                                                                        "id_plat",
                                                                                                        "nom_plat"
                                                                                                ).'
                                                                                </td>
                                                                                <td class="btn">
                                                                                        <input type="button" id="btnAllRight'.$i.'" value=">>" class="btn btn-default" /><br />
                                                                                        <input type="button" id="btnRight'.$i.'" value=">" class="btn btn-default" /><br />
                                                                                        <input type="button" id="btnLeft'.$i.'" value="<" class="btn btn-default" /><br />
                                                                                        <input type="button" id="btnAllLeft'.$i.'" value="<<" class="btn btn-default" />
                                                                                </td>
                                                                                <td class="secondList">'.createCombo( "", "lstBox".($i+1), "col_double", 1, "", "").'</td>
                                                                        </tr>
                                                                </table><br>';
                                                                
                                                        }
                                                
                                                ?>
 
						<input type="submit" class="form-style-55" id="menu_plats" value="Valider votre saisie">
						</form>
					</article>
 
					<div class="clearfix"></div>
 
				<script language="javascript">
 
					(function () {
 
 
						jQuery("td.btn").each( function(i,el) {
 
							$('#btnRight'+i*2).click(function (e) {
								var selectedOpts = $('#lstBox'+i*2+' option:selected');
								if (selectedOpts.length == 0) {
									alert("aucune option sélectionnée.");
									e.preventDefault();
								}
								$('#lstBox'+(i*2+1)).append($(selectedOpts).clone());
								$(selectedOpts).remove();
								e.preventDefault();
							});
 
							$('#btnAllRight'+i*2).click(function (e) {
								var selectedOpts = $('#lstBox'+i*2+' option');
								if (selectedOpts.length == 0) {
									alert("aucune option sélectionnée.");
									e.preventDefault();
								}
								$('#lstBox'+(i*2+1)).append($(selectedOpts).clone());
								$(selectedOpts).remove();
								e.preventDefault();
							});
 
							$('#btnLeft'+i*2).click(function (e) {
								var selectedOpts = $('#lstBox'+(i*2+1)+' option:selected');
								if (selectedOpts.length == 0) {
									alert("aucune option sélectionnée.");
									e.preventDefault();
								}
								$('#lstBox'+i*2).append($(selectedOpts).clone());
								$(selectedOpts).remove();
								e.preventDefault();
							});
 
							$('#btnAllLeft'+i*2).click(function (e) {
								var selectedOpts = $('#lstBox'+(i*2+1)+' option');
								if (selectedOpts.length == 0) {
									alert("aucune option sélectionnée.");
									e.preventDefault();
								}
								$('#lstBox'+i*2).append($(selectedOpts).clone());
								$(selectedOpts).remove();
								e.preventDefault();
							});
 
						});
 
 
 
					}(jQuery));
 
				</script>
 
 
			<?php
                        }
                        ?>
 
		</main>
	</body>
</html>

Mais c'est la première expérience avec JQuery... Je pense que c'est possible d'insérer un code quelque part dans ce JQuery pour extraire un array mais je n'arrive pas à le formaliser..
Merci d'avance pour vos conseils et bonne journée à tous...

**mathieu** · 16/09/2017, 20h00

affichez le contenu de la variable "i" dans les fonctions anonymes pour vérifier qu'elle contient bien la valeur attendue.

**Rogellino** · 16/09/2017, 23h23

Bonsoir,
merci de votre réponse. Mais, malgré qu'elle soit bienvenue naturellement, elle ne m'aide pas du tout. Je n'ai pas l'expertise qu'est la vôtre

Mes combos fonctionnent parfaitement, c'est le POST, dans ma page de traitements qui arrive amputé, seule la première option des combos est $_POSTéé alors que j'en ai sélectionnées quatre ou cinq dans chaque combo:

Code :

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

1
2
3
4
5
6
7
8
9
 
nom-rang0 : 05
lstBox1 : 0006
nom-rang2 : 03
lstBox3 : 0013
nom-rang4 : 13
lstBox5 : 0052
nom-rang6 : 08
lstBox7 : 0042

J'apprend depuis quelques mois, seul, par l'exemple, CSS, HTML, PHP c'est déjà un gros morceau, je commence seulement à effleurer le reste et pour moi votre proposition ajoute de la confusion à ma confusion.
Mais au moins vous m'avez donné un piste, j'ai lu beaucoup de post sur beaucoup de forums où des cadors renvoyaient sèchement les gens à des docs en ligne, comme si ils n'avaient pas, comme moi, fouillé pendant des heures avant de se décider à venir demander de l'aide dans les forums.
Je vous joins ma fonction au cas où vous pourriez me situer ce qui reste encore pour moi complètement "anonyme".

Merci d'avance pour vos réponses et bonne soiré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
function createCombo( $query, $IDName, $className, $multiple, $value, $label ) {
		// $query = requete. Si vide pas d'option générée
		// $IDName = Valeur utilisée pour le name et l'id du select
		// $className = Nom de la classe à appliquer au select ( peut contenir plusieurs classes )
		// $multiple = Définit si on peut choisir plusieurs valeurs dans le select
		// $value = Nom de la colonne dans la requête dans laquelle prendre la valeur pour l'attribut value des options du select 
		// $label = Nom de la colonne dans la requête dans laquelle prendre la valeur pour le libellé des options du select 
 
		$comboHTML = '<select name="'.$IDName.'" id="'.$IDName.'" class="'.$className.'" ';
		if( isset($multiple) && $multiple ) $comboHTML .= 'multiple="multiple"';
		$comboHTML .= '>';
 
		if( $query != "" ) {
			$reponse = makeQuery( $query );
			$inc = 1;
			while ($donnees = $reponse->fetch_assoc()) {
				$comboHTML .= '<option value="'.$donnees[ $value ].'" >'.$donnees[ $label ].'</option>';
			}
		}
 
		$comboHTML .= '</select>';
 
		return $comboHTML;
 
	}

**mathieu** · 17/09/2017, 12h42

Envoyé par Rogellino

Mais, malgré qu'elle soit bienvenue naturellement, elle ne m'aide pas du tout. Je n'ai pas l'expertise qu'est la vôtre

montrez-nous ce que vous obtenez, quelqu'un pourra peut-être vous aider à interpréter ce que vous voyez

le soucis peut aussi venir du nom du menu déroulant, pour récupérer plusieurs valeurs dans PHP, le nom doit se terminer par "[]"
essayez de modifier la fonction "createcombo" à cette ligne :

Code :

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

$comboHTML = '<select name="'.$IDName.'[]" id="'.$IDName.'" class="'.$className.'" ';

Combobox et listes associées

jQuery

Vue hybride

Discussions similaires

Partager

Partager