select choix multiple désélection

**seb76250** · 18/02/2011, 11h55

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 :

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

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 :

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

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

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** · 18/02/2011, 14h01

Bonjour,
tout d'abord curieux

Code :

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

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

mettre plutôt

Code :

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

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

tout court

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

Code :

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

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** · 18/02/2011, 14h42

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

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
 
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** · 18/02/2011, 15h24

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 :

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

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** · 18/02/2011, 15h36

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 :

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

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** · 18/02/2011, 15h49

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 :

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
 
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** · 18/02/2011, 15h54

Code :

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

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 :

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

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** · 18/02/2011, 16h16

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** · 18/02/2011, 19h23

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 :

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

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 :

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
 
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** · 18/02/2011, 20h02

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 :

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

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 :

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
 
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** · 18/02/2011, 20h32

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

je reste surpris que cela fonctionne

Code :

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

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 :

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

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

maintenant reprenons l'algorithme

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
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** · 18/02/2011, 21h30

Oui ça fonctionne bien même je trouve :

Code :

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

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** · 18/02/2011, 22h05

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
 
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** · 18/02/2011, 22h08

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 :

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

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

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** · 18/02/2011, 22h31

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
 
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** · 18/02/2011, 22h43

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** · 18/02/2011, 22h52

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

select choix multiple désélection

JavaScript

Discussions similaires

Partager

Partager