Erreur à l'affichage des valeurs d'un select multiple

**arthuro45** · 19/04/2010, 01h41

Bonsoir ou plutôt bonjour,

Je bloque sur la récupération des valeurs d'un select multiple1 alimenté par un autre select multiple2.
Je veux afficher les valeurs du select multiple2.
Au clique sur le bouton valider j'ai une erreur :

Code :

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

Erreur*: frm.liste_champs is undefined

Voici le code en entier pour le test :

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
<html>
     <head>
		 <script type="text/javascript">
 
     function selection_champs(champs,champs_affiche){
     //on récupère l'endroit sélectionner dans le select source
     selection = champs.selectedIndex;
     if(selection != -1){
     //on déselectionne tous les champs du select de destination où va être placer le(s) champ(s) selectionner
     while(champs_affiche.selectedIndex != -1){
     champs_affiche.options[champs_affiche.selectedIndex].selected = false;
     }
 
     while(champs.selectedIndex > -1){
     if(champs.options[champs.selectedIndex].value == "Id_type_bien"){
     champs.options[champs.selectedIndex] = null;
     champs.form.Id_categorie_bien.options[0].select= true;
     }else{
     //on cherche la place de notre champ
     for(place=0;place<champs_affiche.length;place++){
     if(champs_affiche.options[place].text > champs.options[champs.selectedIndex].text){
     break;
     }
     }
     //on décale tous les champs
     for(i=champs_affiche.length;i>place;i--){
     champs_affiche.options[i] = new Option(champs_affiche.options[(i-1)].text,champs_affiche.options[(i-1)].value);
     }
 
     //on insère le champ selectionner
     champs_affiche.options[place] = new Option(champs.options[champs.selectedIndex].text,champs.options[champs.selectedIndex].value);
     champs.options[champs.selectedIndex] = null;
     champs_affiche.options[place].selected = true;
     }
     }
 
     if(champs.length > 0){
     if(selection >= champs.length ){
     selection = champs.length-1;
     }
     champs.options[selection].selected = true;
     }
     }
     }
 
     function select_all(frm){
     for(i=0;i<frm.liste_champs.length;i++){
     frm.liste_champs.options[i].selected = true;
     }
     frm.liste_champs.name = "liste_champs[]";
 
     for(i=0;i<frm.selection.length;i++){
     frm.selection.options[i].selected = true;
     }
     frm.selection.name = "selection[]";
     }
 
     function priorite_champ(selection,mode){
     if(selection.length < 2 ){return;}
     old_place = selection.selectedIndex;
     if(mode == 'up' && old_place > 0){
     new_place = old_place-1;
     }else if(mode == 'down' && old_place < selection.length-1){
     new_place = old_place+1;
     }
 
     tmp = new Option(selection.options[new_place].text,selection.options[new_place].value);
     selection.options[new_place] = new Option(selection.options[old_place].text,selection.options[old_place].value);
     selection.options[old_place] = new Option(tmp.text,tmp.value);
     selection.options[new_place].selected = true;
     }
 
		 </script>
		 </head>
 
<form name="form1" method="post" action="">
	<table id="tab1" cellspacing="11">
			<tr>
				<td>
					<select id="liste_champs" multiple size="3" name="liste_champs" multiple OnDblClick="javascript:selection_champs(this.form.liste_champs,this.form.selection)">
						<option>site1</option>
						<option>site2</option>
						<option>site3</option>
					</select>
				</td>
			<td>
				<input class="bouton" type="button" name="selectionner" value=" >> " OnClick="javascript:selection_champs(this.form.liste_champs,this.form.selection)">
			</td>
			<td>
				<input class="bouton" type="button" name="deselect" value=" << " OnClick="javascript:selection_champs(this.form.selection,this.form.liste_champs)">
			</td>
			</td>
			<td>
				<select id="selection" name="selection" multiple size="3" class="multiple" OnDblClick="javascript:selection_champs(this.form.selection,this.form.liste_champs)">
				</select>
			</td>
			<td>
			</td>
			<td>
				<input type="button" name="valider" value="valider" onclick="select_all(this)">
			</td>
		</tr>
	</table>
</form>

Merci pour votre aide

**vermine** · 19/04/2010, 07h41

Bonjour,

Vous passez this comme paramètre donc frm n'est pas le formulaire mais le bouton sur lequel on vient de cliquer:

Code :

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

1
2
 
this.form

**arthuro45** · 19/04/2010, 08h13

Bonjour,

J'ai remplacé this par le nom du formulaire. J'ai mis une alert pour vérifier ce que je ramène du select multiple2, mais l'alerte n'affiche que "selection[] ?

Code :

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

onclick="select_all(form1)"

**vermine** · 19/04/2010, 08h32

Quel est le problème en fait ?

**arthuro45** · 19/04/2010, 08h37

Je voudrais récupérer les valeurs du select multiple2.

**vermine** · 19/04/2010, 08h39

Oui, mais... Ca le fait, non ? Votre page fonctionne, me semble-t-il.

**arthuro45** · 19/04/2010, 08h49

La page fonctionne effectivement, les valeurs passent bien d'un select à l'autre, mais quand il s'agit d'afficher (pour vérification) les valeurs que je placent dans le select2 je n'affiche rien.

**vermine** · 19/04/2010, 08h56

Pourrais-je voir le code où vous faites l'affichage, s'il vous plait bien ?

**arthuro45** · 19/04/2010, 08h57

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
<form name="form1" method="post" action="">
	<table id="tab1" cellspacing="11">
			<tr>
				<td>
					<select id="liste_champs" multiple size="3" name="liste_champs" multiple OnDblClick="javascript:selection_champs(this.form.liste_champs,this.form.selection)">
						<option value="s1">site1</option>
						<option value="s2">site2</option>
						<option value="s3">site3</option>
					</select>
				</td>
			<td>
				<input class="bouton" type="button" name="selectionner" value=" >> " OnClick="javascript:selection_champs(this.form.liste_champs,this.form.selection)">
			</td>
			<td>
				<input class="bouton" type="button" name="deselect" value=" << " OnClick="javascript:selection_champs(this.form.selection,this.form.liste_champs)">
			</td>
			</td>
			<td>
				<select id="selection" name="selection" multiple size="3" class="multiple" OnDblClick="javascript:selection_champs(this.form.selection,this.form.liste_champs)">
				</select>
			</td>
			<td>
			</td>
			<td>
				<input type="button" name="valider" value="valider" onclick="select_all(form1)">
			</td>
		</tr>
	</table>
</form>

**vermine** · 19/04/2010, 09h15

Je ne comprends pas ce que vous demandez.

Ni ce que vous faites.
Par contre, je remarque que vous ne déclarez pas vos variables:

Code :

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

1
2
var ma variable = "ma valeur";

C'est dangereux surtout avec la variable selection que vous utilisez en local et en global.

**arthuro45** · 19/04/2010, 09h26

mais quand il s'agit d'afficher (pour vérification) les valeurs que je placent dans le select2 je n'affiche rien.

Quand je dis afficher je parle de récupérer dans une variable les values pour envoi via Ajax.

**SpaceFrog** · 19/04/2010, 09h33

une syntaxe un peu plus rigoureuse aiderait sans doute

Code :

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

onclick="select_all(form1)"

Code :

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

onclick="select_all(document.fomrs['form1'])"

si tu tiens à passer le form en paramètre ...

Sinon
http://www.developpez.net/forums/d80...letion-select/

**arthuro45** · 19/04/2010, 09h44

une syntaxe un peu plus rigoureuse aiderait sans doute

Code :

onclick="select_all(form1)"

Code :

onclick="select_all(document.fomrs['form1'])"

si tu tiens à passer le form en paramètre ...

J'ai modifié la syntaxe (merci) :

Code :

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

onclick="select_all(document.forms['form1'])"

Mais pourquoi mon alerte n'affiche que "selection[]" à la place des values du select name="selection" ?

**vermine** · 19/04/2010, 09h48

Où est l'alert ?

**arthuro45** · 19/04/2010, 09h53

Désolé, je viens de voir que j'ai modifié le code que j'ai posté initialement sans vous montrer les changements, effectivement vous ne pouviez pas voir l'alerte :

Où est l'alert ?

Dans la fonction select_all :

Code :

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

1
2
var res = frm.selection.name = "selection[]";
          alert(res);

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
<html>
     <head>
		 <script type="text/javascript">
 
     function selection_champs(champs,champs_affiche){
     //on récupère l'endroit sélectionner dans le select source
     selection = champs.selectedIndex;
     if(selection != -1){
     //on déselectionne tous les champs du select de destination où va être placer le(s) champ(s) selectionner
     while(champs_affiche.selectedIndex != -1){
     champs_affiche.options[champs_affiche.selectedIndex].selected = false;
     }
 
     while(champs.selectedIndex > -1){
     if(champs.options[champs.selectedIndex].value == "Id_type_bien"){
     champs.options[champs.selectedIndex] = null;
     champs.form.Id_categorie_bien.options[0].select= true;
     }else{
     //on cherche la place de notre champ
     for(place=0;place<champs_affiche.length;place++){
     if(champs_affiche.options[place].text > champs.options[champs.selectedIndex].text){
     break;
     }
     }
     //on décale tous les champs
     for(i=champs_affiche.length;i>place;i--){
     champs_affiche.options[i] = new Option(champs_affiche.options[(i-1)].text,champs_affiche.options[(i-1)].value);
     }
 
     //on insère le champ selectionner
     champs_affiche.options[place] = new Option(champs.options[champs.selectedIndex].text,champs.options[champs.selectedIndex].value);
     champs.options[champs.selectedIndex] = null;
     champs_affiche.options[place].selected = true;
     }
     }
 
     if(champs.length > 0){
     if(selection >= champs.length ){
     selection = champs.length-1;
     }
     champs.options[selection].selected = true;
     }
     }
     }
 
     function select_all(frm){
     for(i=0;i<frm.liste_champs.length;i++){
     frm.liste_champs.options[i].selected = true;
     }
     frm.liste_champs.name = "liste_champs[]";
 
     for(i=0;i<frm.selection.length;i++){
     frm.selection.options[i].selected = true;
     }
     var res = frm.selection.name = "selection[]";
		 alert(res);
     }
 
     function priorite_champ(selection,mode){
     if(selection.length < 2 ){return;}
     old_place = selection.selectedIndex;
     if(mode == 'up' && old_place > 0){
     new_place = old_place-1;
     }else if(mode == 'down' && old_place < selection.length-1){
     new_place = old_place+1;
     }
 
     tmp = new Option(selection.options[new_place].text,selection.options[new_place].value);
     selection.options[new_place] = new Option(selection.options[old_place].text,selection.options[old_place].value);
     selection.options[old_place] = new Option(tmp.text,tmp.value);
     selection.options[new_place].selected = true;
     }
 
		 </script>
		 </head>
 
<form name="form1" method="post" action="">
	<table id="tab1" cellspacing="11">
			<tr>
				<td>
					<select id="liste_champs" multiple size="3" name="liste_champs" multiple OnDblClick="javascript:selection_champs(this.form.liste_champs,this.form.selection)">
						<option value="s1">site1</option>
						<option value="s2">site2</option>
						<option value="s3">site3</option>
					</select>
				</td>
			<td>
				<input class="bouton" type="button" name="selectionner" value=" >> " OnClick="javascript:selection_champs(this.form.liste_champs,this.form.selection)">
			</td>
			<td>
				<input class="bouton" type="button" name="deselect" value=" << " OnClick="javascript:selection_champs(this.form.selection,this.form.liste_champs)">
			</td>
			</td>
			<td>
				<select id="selection" name="selection" multiple size="3" class="multiple" OnDblClick="javascript:selection_champs(this.form.selection,this.form.liste_champs)">
				</select>
			</td>
			<td>
			</td>
			<td>
				<input type="button" name="valider" value="valider" onclick="select_all(document.forms['form1'])">
			</td>
		</tr>
	</table>
</form>

**vermine** · 19/04/2010, 09h58

Mettez les trois dans le select2 puis cliquez:

Code :

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

1
2
3
 
frm.selection.name = "selection[]";
alert(frm.selection[1].value); //donnera s2

**SpaceFrog** · 19/04/2010, 09h58

Il ne faut pas essayer d'attribuer ou de modifier un name d'element de formulaire dynamiquement, ça ne fonctionne pas sous IE.

**arthuro45** · 19/04/2010, 10h49

Mettez les trois dans le select2 puis cliquez:

Effectivement ça fonctionne mais ne boucle pas pour afficher toutes le contenu du select.

Il ne faut pas essayer d'attribuer ou de modifier un name d'element de formulaire dynamiquement, ça ne fonctionne pas sous IE.

J'ai remplacé name par id et ça fonctionne sous ie.

Vous l'avez compris, je ne maitrise pas JavaScript, du coup j'ai tenté avec une source trouvé dans la faq, mais au clique l'alerte affiche seulement : L'option undefined est selectionné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
function select_all(){
	  var selectedList = new Array();
	  var selectBox = document.forms[0].selection;
	  for (var i=0; i<selectBox.options.length; i++) {
	  if (selectBox.options[i].selected) {
	  selectedList.push(selectBox.options[i]);
	     }
	  }
	  var alertTxt = "";
	  for (opt in selectedList) {
	  alertTxt += "L'option "+opt.value+" est selectionnée \n";
	  }
	  alert(alertTxt);
     }

**SpaceFrog** · 19/04/2010, 11h16

bonne idée de changer le name en id ... encore faut il le changer partout ...

Erreur à l'affichage des valeurs d'un select multiple

JavaScript

Discussions similaires

Partager

Partager