Discussion :

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

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]

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]

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]

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]

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]

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]

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.