IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

select choix multiple désélection


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Avril 2008
    Messages
    54
    Détails du profil
    Informations forums :
    Inscription : Avril 2008
    Messages : 54
    Par défaut select choix multiple désélection
    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.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    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

  3. #3
    Membre averti
    Inscrit en
    Avril 2008
    Messages
    54
    Détails du profil
    Informations forums :
    Inscription : Avril 2008
    Messages : 54
    Par défaut re
    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

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    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....

  5. #5
    Membre averti
    Inscrit en
    Avril 2008
    Messages
    54
    Détails du profil
    Informations forums :
    Inscription : Avril 2008
    Messages : 54
    Par défaut précision
    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.

  6. #6
    Membre averti
    Inscrit en
    Avril 2008
    Messages
    54
    Détails du profil
    Informations forums :
    Inscription : Avril 2008
    Messages : 54
    Par défaut
    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.

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. select choix multiple
    Par Nemesis007 dans le forum Général JavaScript
    Réponses: 12
    Dernier message: 02/04/2008, 15h51
  2. Réponses: 2
    Dernier message: 12/12/2006, 11h07
  3. select à choix multiple
    Par tribaleur dans le forum Balisage (X)HTML et validation W3C
    Réponses: 11
    Dernier message: 22/06/2006, 15h53
  4. Supprimer une option d'un select à choix multiple
    Par Oluha dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 02/02/2005, 14h16
  5. pb de select avec size avec choix multiple
    Par La_picolle dans le forum ASP
    Réponses: 10
    Dernier message: 28/08/2003, 15h21

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo