select choix multiple désélection [Résolu]

[seb76250]

Bonjour,

Sur un site intranet, j'ai un formulaire avec un select à choix multiple où j'ai intégré l'évènement javascript "OnChange".

Code :

1
2
3
4
5
6
7
8
9
 
<select name="processus[]" id="processus" OnChange="pilote('processus');" size=4 multiple="multiple">
<?php
while($DataProcessus = mysql_fetch_array($ReqProcessus))
{
echo '<option value="'.$DataProcessus['id_processus'].'">'.$DataProcessus['nom_processus'].'_'.$DataProcessus['description_processus'].'</option>';
}
?>
</select>

Quand l'utilisateur clique sur une ou plusieurs options, la fonction javascript pilote(processus) me permet de parcourir les options sélectionnées et d'ajouter via createElement un div, dans ce même formulaire, que je remplie ensuite grâce a innerHTML.

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
 
//Fonction qui affiche une chkbox pour savoir si un utilisateur ajouter est pilote d'un processus
function pilote(selectId)
{
var elmt = document.getElementById(selectId);
var parentElement = document.getElementById("piloteProcessus");
	if(elmt.multiple == false)
	{
		return elmt.options[elmt.selectedIndex].value;
	}
	var values = new Array();
	for(var i=0; i< elmt.options.length; i++)
	{
		if(elmt.options[i].selected == true)
		{
			values[values.length] = elmt.options[i].value; 
			var titre = document.createElement("<div>");
			titre.id = values;			
			parentElement.appendChild(titre);
			var selectedText= elmt.options[i].text;
			document.getElementById(titre.id).innerHTML = '<table style="width:50%; margin:0 auto"><tr><td style="width:80%">Pilote ' + selectedText + '&nbsp;&nbsp;&nbsp;</td><td style="width:10%"><label>PP </label><input type="checkbox" id="pp" name="pp" value="'+ values +'">&nbsp;&nbsp;&nbsp;</td><td style="width:10%"><label>PS </label></label><input type="checkbox" id="ps" name="ps" value="'+ values +'"></td></tr></table><br/>';
		}
	}
}

Ce que j'essaye de faire c'est :
Quand l'utilisateur a déselectionné une option, il faudrait que le div qui a été crée auparavant soit supprimé.

J'ai essayé d'intégrer dans le code :

Code :

1
2
3
4
5
 
if(elmt.options[i].selected == false)
{
document.getElementById(parentElement).parentNode.removeChild(document.getElementById(titre.id));
}

Mais ca ne fonctionne pas bien sûr, je ne rentre jamais dans cette condition.

Je ne vois pas trop comment faire malgré mes recherches et comme ca fais deux jours que je suis dessus je me retourne vers vous.
J'espère que j'ai été assez clair dans mon explication. Si ce n'est pas le cas, n'hésitez pas à me demander plus d'infos.

Merci d'avance pour vos réponses.

[NoSmoking]

Bonjour,
tout d'abord curieux

Code :

var titre = document.createElement("<div>");

mettre plutôt

Code :

var titre = document.createElement("DIV");

tout court

Pour le principe sur le onchange tu parcours la liste des options,

Code :

1
2
3
4
5
6
7
8
9
10
POUR toutes les OPTIONs
  SI OPTION selected ALORS
    SI not existe DIV ALORS
      createElement DIV
    FIN SI
  SINON
    SI DIV existe ALORS
      removeChild DIV
  FIN SI
FIN POUR

[seb76250]

Bonjour NoSmoking,
Merci pour l'algo. Est ce que mon code correspond bien à l'algo:

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
 
function pilote(selectId)
{
var elmt = document.getElementById(selectId);
var parentElement = document.getElementById("piloteProcessus");
	if(elmt.multiple == false)
	{
		return elmt.options[elmt.selectedIndex].value;
	}
	var values = new Array();
	for(var i=0; i< elmt.options.length; i++)
	{
		if(elmt.options[i].selected == true)
		{
			values[values.length] = elmt.options[i].value; 
			var selectedText= elmt.options[i].text;
			if (!document.getElementById(selectedText))
			{
			var titre = document.createElement("DIV");
			titre.id = selectedText;
			parentElement.appendChild(titre);
			document.getElementById(titre.id).innerHTML = '<table style="width:50%; margin:0 auto"><tr><td>Pilote ' + selectedText + '&nbsp;&nbsp;&nbsp;</td><td style="width:10%"><label>PP </label><input type="checkbox" id="pp" name="pp" value="'+ values +'">&nbsp;&nbsp;&nbsp;</td><td style="width:10%"><label>PS </label></label><input type="checkbox" id="ps" name="ps" value="'+ values +'"></td></tr></table><br/>';
			}
			else
			{
			document.getElementById(parentElement).parentNode.removeChild(document.getElementById(selectedText));
			}
		}
	}
}

Si le code correspond, ça ne fonctionne pas lorsque sélectionne une option j'ai bien mon div.
Je désélectionne, le div ne s'efface pas.
Et maintenant quand je sélectionne plusieurs choix en restant appuyé sur ctrl, la fonction ne m'en trouve qu'un sélectionné.

Je ne comprend pas ce qu'il se passe.

Merci pour ton aide

[NoSmoking]

Est ce que mon code correspond bien à l'algo:

de loin !

Tout d'abord quelques précisions à fournir.
- l'ID des DIV a t-elle une importance
- à quoi te sert values dans le name

maintenant une remarque

Je désélectionne, le div ne s'efface pas.

Code :

document.getElementById(parentElement)

getElementById comme son nom l'indique récupère l'élément dont l'ID est passée en paramètre, là tu passes un objet, cela ne fonctionnera donc pas

Et maintenant quand je sélectionne plusieurs choix en restant appuyé sur ctrl, la fonction ne m'en trouve qu'un sélectionné.

c'est normal, le script plante....

[seb76250]

l'id du div a une importance dans le sens seulement où je ne veux pas remplacer le div crée mais écrire à la suite. Si je met pas d'id, il remplace toujours le div. J'espère que je me fais comprendre ce n'est pas facile à expliquer

Pour la deuxième question je ne comprend pas en faites dsl peux-tu préciser stp.

Du coup pour l'objet je n'avais pas fais attention donc ça donnerai :

Code :

1
2
 
document.getElementById("piloteProcessus").parentNode.removeChild(document.getElementById(selectedText));

c'est ça ?

Dsl j'ai un peux de mal en javascript je débute.

Merci encore.

[seb76250]

Le multiselect fonctionne si je sélectionne à la souris plusieurs options mais dès que j'utilise ctrl du clavier ça ne fonctionne plus.

Je reposte le 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
 
function pilote(selectId)
{
var elmt = document.getElementById(selectId);
var parentElement = document.getElementById("piloteProcessus");
	if(elmt.multiple == false)
	{
		return elmt.options[elmt.selectedIndex].value;
	}
	var values = new Array();
	for(var i=0; i< elmt.options.length; i++)
	{
		if(elmt.options[i].selected == true)
		{
			values[values.length] = elmt.options[i].value; 
			var selectedText= elmt.options[i].text;
			if (!document.getElementById(selectedText))
			{
			var titre = document.createElement("DIV");
			titre.id = selectedText;
			parentElement.appendChild(titre);
			document.getElementById(titre.id).innerHTML = '<table style="width:50%; margin:0 auto"><tr><td>Pilote ' + selectedText + '&nbsp;&nbsp;&nbsp;</td><td style="width:10%"><label>PP </label><input type="checkbox" id="pp" name="pp" value="'+ values +'">&nbsp;&nbsp;&nbsp;</td><td style="width:10%"><label>PS </label></label><input type="checkbox" id="ps" name="ps" value="'+ values +'"></td></tr></table><br/>';
			}
			else
			{
			parentElement.parentNode.removeChild(document.getElementById(selectedText));
			}
		}
	}
}

Y'a un truc qui m'échappe mais je n'arrive pas à comprendre quoi.

[NoSmoking]

Code :

document.getElementById("piloteProcessus").parentNode.removeChild(document.getElementById(selectedText));

commençons par cela
- removeChild signifie que l'on va supprimer un élément, mais où, là ou il a été crée, et si je ne m'abuse tu l'as créer dans parentElement, donc c'est ce même parentElement qui doit porter la méthode.
- Comme parentElement correspond à document.getElementById("piloteProcessus"), le début est prometteur.
- Comme tu appliques la méthode à parentElement.parentNode cela ne peut pas être bon.
- La suite est correcte...

l'id du div a une importance dans le sens seulement où je ne veux pas remplacer le div crée mais écrire a la suite si je met pas d'id il remplace toujours le div j'espère que je me fais comprendre pas facil a expliquer

dans ce cas il est plus simple de les identifier par exemple, option_1, option_2 etc... ou le numéro correspond au numéro chrono de l'option, ainsi dans ta boucle tu récupères et testes en direct

Code :

1
2
3
 
for(var i=0; i< elmt.options.length; i++){
  oTmp = document.getElementById( 'option_' +i);

Pour la deuxième question je ne comprend pas en faites dsl peux-tu préciser stp.

on verra lus tard si besoin.

[seb76250]

Merci pour ces précisions et d'accorder du temps à mon problème.
La je quitte le travail, je regarderai ce soir en détail tout ça et je repost dès que j'ai avancé.

[seb76250]

Je post mon avancement, le div s'ajoute, se supprime.
Seulement, parfois, quand je clic, il ne se passe rien ...
Il faut que je reclic sur la première option pour que la fonction intervienne.
Encore une erreur dans le script, je suppose, mais je ne vois pas.

Pour info j'ai changé les options et la fonction je repost le tout:


Select :

Code :

1
2
3
4
5
6
7
8
9
10
11
 
<select name="processus[]" id="processus" OnChange="pilote('processus');" size=4 multiple="multiple">
							<?php
							$i = 0;
							while($DataProcessus = mysql_fetch_array($ReqProcessus))
							{
								echo '<option id="option_'.$i.'" value="'.$DataProcessus['id_processus'].'">'.$DataProcessus['nom_processus'].'_'.$DataProcessus['description_processus'].'</option>';
								$i = $i+1;
							}
							?>
						</select>

et la fonction :

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
 
function pilote(selectId)
{
var elmt = document.getElementById(selectId);
var parentElement = document.getElementById("piloteProcessus");
	if(elmt.multiple == false)
	{
		return elmt.options[elmt.selectedIndex].value;
	}
	var Value = new Array();
	for(var i=0; i< elmt.options.length; i++)
	{
		if(document.getElementById( 'option_' +i).selected == true)
		{
			var oTmp = document.getElementById( 'option_' +i);
			var Value = oTmp.value;		
			var Text= oTmp.text;
			if (!document.getElementById('div_option_' +i))
			{
				var titre = document.createElement("DIV");
				titre.id = 'div_option_' +i;
				parentElement.appendChild(titre);
				document.getElementById(titre.id).innerHTML = '<table style="width:50%; margin:0 auto"><tr><td>Pilote ' + Text + '&nbsp;&nbsp;&nbsp;</td><td style="width:10%"><label>PP </label><input type="checkbox" id="pp" name="pp" value="'+ Value +'">&nbsp;&nbsp;&nbsp;</td><td style="width:10%"><label>PS </label></label><input type="checkbox" id="ps" name="ps" value="'+ Value +'"></td></tr></table><br/>';
			}
 
		}
		else
		{
			parentElement.removeChild(document.getElementById('div_option_' +i));
		}
	}
}

Voilà, j'espère en venir à bout ce soir deux jour déjà sur une petite fonction js ... dur j'imagine pas pour des plus corsé

[seb76250]

Bon bah à force de chercher ... on trouve comme on dit.
Alors après je sais pas si c'est le script idéal mais les quelques tests que j'ai fais me convienne.

Si tu vois une amélioration possible n'hésite pas.

Le select:

Code :

1
2
3
4
5
6
7
8
9
10
11
 
<select name="processus[]" id="processus" OnChange="pilote('processus');" size=4 multiple="multiple">
							<?php
							$i = 0;
							while($DataProcessus = mysql_fetch_array($ReqProcessus))
							{
								echo '<option id="option_'.$i.'" value="'.$DataProcessus['id_processus'].'">'.$DataProcessus['nom_processus'].'_'.$DataProcessus['description_processus'].'</option>';
								$i = $i+1;
							}
							?>
						</select>

et la fonction:

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
 
function pilote(selectId)
{
var elmt = document.getElementById(selectId);
var parentElement = document.getElementById("piloteProcessus");
	if(elmt.multiple == false)
	{
		return elmt.options[elmt.selectedIndex].value;
	}
	var Value = new Array();
	for(var i=0; i< elmt.options.length; i++)
	{
		if (document.getElementById('div_option_' +i))
		{
			parentElement.removeChild(document.getElementById('div_option_' +i));
		}
		if(document.getElementById( 'option_' +i).selected == true)
		{
			var oTmp = document.getElementById( 'option_' +i);
			var Value = oTmp.value;		
			var Text= oTmp.text;
			var titre = document.createElement("DIV");
			titre.id = 'div_option_' +i;
			parentElement.appendChild(titre);
			document.getElementById(titre.id).innerHTML = '<table style="width:50%; margin:0 auto"><tr><td>Pilote ' + Text + '&nbsp;&nbsp;&nbsp;</td><td style="width:10%"><label>PP </label><input type="checkbox" id="pp" name="pp" value="'+ Value +'">&nbsp;&nbsp;&nbsp;</td><td style="width:10%"><label>PS </label></label><input type="checkbox" id="ps" name="ps" value="'+ Value +'"></td></tr></table><br/>';
		}
	}
}

Merci encore NoSmoking pour tes explications.

[NoSmoking]

Si tu vois une amélioration possible n'hésite pas.

je reste surpris que cela fonctionne

Code :

1
2
3
4
if (document.getElementById('div_option_' +i)){
  parentElement.removeChild(document.getElementById('div_option_' +i));
}
if(document.getElementById( 'option_' +i).selected == true)	{

- les deux premières lignes sont correctes, seulement la troisième doit planter si l'élément n'existe pas.
-de plus document.getElementById( 'option_' +i) est normalement une DIV donc n'a pas de selected

Il est quand même plus aisé de mettre l'élément dans une variable locale du style

Code :

1
2
3
for(var i=0; i< elmt.options.length; i++){
  // recup Element
  oDiv = document.getElementById( sId +i);

maintenant reprenons l'algorithme

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
var oDiv;
var sId = "option_";
// POUR toutes les OPTIONs
for(var i=0; i< elmt.options.length; i++){
  // recup Element
  oDiv = document.getElementById( sId +i);
 
  // SI OPTION selected ALORS
  if( elmt.options[i].selected == true){
    // SI not existe DIV ALORS
    if( !oDiv){
      // createElement DIV
      oDiv = document.createElement("DIV");
      oDiv.id = sId +i;
      oParent.appendChild( oDiv);
    }
  // SINON
  else{
    // SI DIV existe ALORS
    if( oDiv){
      // removeChild DIV
      oParent.removeChild( oDiv);
    }
  }
}

voila en gros, sans le remplissage des DIV et c'est là que reviens la question n°2

- à quoi te sert values dans le name

[seb76250]

Oui ça fonctionne bien même je trouve :

Code :

1
2
3
4
5
 
if (document.getElementById('div_option_' +i)){
  parentElement.removeChild(document.getElementById('div_option_' +i));
}
if(document.getElementById( 'option_' +i).selected == true)	{

La troisième existe forcément ce sont mes options sélectionnées 'option_' +i pas le div 'div_option_' +i

Ton algorithme ne convient pas je pense (m'en veut pas si j'ai tord ) car si une option est sélectionné et que le div est déjà crée il le supprime alors que l'utilisateur a juste sélectionné une autre option.
C'est un évènement onChange il refait la boucle à chaque changement.
Tu vois ce que je veux dire ?

- à quoi te sert values dans le name (je ne comprend toujours pas quel name ? tu peux me montrer quel partie du code stp ?)

[seb76250]

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
 
function pilote(selectId)
{
var elmt = document.getElementById(selectId);
var parentElmt = document.getElementById("piloteProcessus");
	if(elmt.multiple == false)
	{
		return elmt.options[elmt.selectedIndex].value;
	}
	for(var i=0; i< elmt.options.length; i++)
	{
		var Div = 'div_option_' +i;
		var DivElmt = document.getElementById(Div);
		var Opt = document.getElementById('option_' +i);
		if (DivElmt)
		{
			parentElmt.removeChild(DivElmt);
		}
		if(Opt.selected == true)
		{
			var Value = Opt.value;		
			var Text= Opt.text;
			var titre = document.createElement("DIV");
			titre.id = Div;
			parentElmt.appendChild(titre);
                       //innerHTML
	         }
	}
}

[NoSmoking]

Ton algorithme ne convient pas je pense (m'en veut pas si j'ai tord ) car si une option est sélectionné et que le div est déjà crée il le supprime alors que l'utilisateur a juste sélectionné une autre option.

l'algorithme est bon mais le code FAUX, il manque une accolade fermante

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
var oDiv;
var sId = "option_";
// POUR toutes les OPTIONs
for(var i=0; i< elmt.options.length; i++){
  // recup Element
  oDiv = document.getElementById( sId +i);
 
  // SI OPTION selected ALORS
  if( elmt.options[i].selected == true){
    // SI not existe DIV ALORS
    if( !oDiv){
      // createElement DIV
      oDiv = document.createElement("DIV");
      oDiv.id = sId +i;
      oParent.appendChild( oDiv);
    }
  } //<--- MANQUE ICI --
  else{
    // SI DIV existe ALORS
    if( oDiv){
      // removeChild DIV
      oParent.removeChild( oDiv);
    }
  }
}

et pourtant avec l'indentation on est sensé s'en rendre compte

- à quoi te sert values dans le name (je ne comprend toujours pas quel name ? tu peux me montrer quel partie du code stp ?)

c'est sur cette ligne

Code :

document.getElementById(titre.id).innerHTML = '<table style="width:50%; margin:0 auto"><tr><td>Pilote ' + Text + '&nbsp;&nbsp;&nbsp;</td><td style="width:10%"><label>PP </label><input type="checkbox" id="pp" name="pp" value="'+ Value +'">&nbsp;&nbsp;&nbsp;</td><td style="width:10%"><label>PS </label></label><input type="checkbox" id="ps" name="ps" value="'+ Value +'"></td></tr></table><br/>';

[seb76250]

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
 
function pilote(selectId)
{
var elmt = document.getElementById(selectId);
var parentElmt = document.getElementById("piloteProcessus");
	if(elmt.multiple == false)
	{
		return elmt.options[elmt.selectedIndex].value;
	}
	for(var i=0; i< elmt.options.length; i++)
	{
		var Div = 'div_option_' +i;
		var DivElmt = document.getElementById(Div);
		var Opt = document.getElementById('option_' +i);
		if(Opt.selected == true)
		{
			if(!DivElmt)
			{
			var Value = Opt.value;		
			var Text= Opt.text;
			var titre = document.createElement("DIV");
			titre.id = Div;
			parentElmt.appendChild(titre);
			document.getElementById(titre.id).innerHTML = '<br/><table style="width:60%; margin: 0 auto"><tr><td></td><td style="width:10%; text-align:center"><p>Principal</p></td><td style="width:10%; text-align:center"><p>Secondaire</p></td><td style="width:10%; text-align:center"><p>Non</p></td></tr><tr><td><p>Est-il pilote du processus <b>'+Text+'</b> ?</p></td><td style="width:10%; text-align:center"><input type="radio" name="pilote'+i+'" value="pp,'+Value+'"></td><td style="width:10%; text-align:center"><input type="radio" name="pilote'+i+'" value="ps,'+Value+'"></td><td style="width:10%; text-align:center"><input type="radio" checked="checked" name="pilote'+i+'" value="0"></td></tr></table><br/><br/>';
			}
		}
		else
		{
			if(DivElmt)
			{
			parentElmt.removeChild(DivElmt);
			}
		}
	}
}

Merci. C'est mieux ?

Merci mais j'avais pas testé ton code en faite

Le value me sert à récupérer un identifiant pour travailler sur une table après pourquoi il te gène ?

[NoSmoking]

Envoyé par seb76250

Le value me sert à récupérer un identifiant pour travailler sur une table après pourquoi il te gène ?

pas le moins du monde mais ne connaissant son utilité difficile de l'intégrer dans la fonction

[seb76250]

Ok bah en tout cas merci pour la réponse, enfin un problème de résolu.
Bonne continuation