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 :

S�lection personnalis�e en javascript dans un select multiple


Sujet :

JavaScript

Vue hybride

Message pr�c�dent Message pr�c�dent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Inscrit en
    Avril 2010
    Messages
    13
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Avril 2010
    Messages : 13
    Par d�faut S�lection personnalis�e en javascript dans un select multiple
    Bonjour , j'esp�re pouvoir �tre �clair� sur ma question apr�s plusieurs heures de gal�re!!

    En gros, je g�n�re dynamiquement les champs option de ma balise select � partir de deux boucles php.
    L'une pour lister des cat�gories et l'autre les sous cat�gories associ�es.
    je voudrais � partir d'un "onchange" sur les �v�nements de mon select pouvoir lorsque je clique sur une cat�gorie s�lectionner toute les sous cat�gories associ�es ( et sur l'�v�nement inverse tout d�s�lectionner).
    Et, un petit plus!! Pouvoir enregistrer les options s�lectionn�es pr�c�demment sans avoir � appuyer sur Ctrl pour garder les champs s�lectionn�.

    Voila mon code :

    PHP :
    Code php : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
     
    <select class="left" id="interets" name="interet[]"  size="15" multiple onchange="selectInterests()">
    //Parcours des menus
                <?php foreach($this->menus_gauche_priv as $i=>$menu_gauche_priv){?>
    //Affichage menus
                <option class="menu_<?=$i?>" id="menu_<?=$i?>"  value="" style="color:#347A9B;font-style:italic;font-weight:bold;"><?=$menu_gauche_priv['title']?></option>
    //Récupération des sous menus
                		    <?php $this->menus_ss_menu_gauche_priv = $this->tree->select('id_parent = "'.$menu_gauche_priv['id_tree'].'" AND status ="1" AND id_langue ="'.$this->language.'"','ordre asc');
    //Parcours des sous menus						foreach($this->menus_ss_menu_gauche_priv as $j=>$ss_menu_gauche_priv){?>
    //Affichage sous menus
    			<option class="sousMenu_<?=$i?>" value="<?=$ss_menu_gauche_priv['title']?>">--- <?=$ss_menu_gauche_priv['title']?></option>
                                <?php }}?>
              	</select>
    JAVASCRIPT :


    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
    var isInsideSelectedOption = new Array();
    var isInsideSelectedSsOption = new Array();
     
    function selectInterests()
    	{
     
    //On récupère toute les balises option		
    		var option = document.getElementsByTagName('option');
    //7 menus en tout ( Si je peux récupérer le nombre de menus via argument je suis preneur! :-) )		
    				for (i=0;i<7;i++)
    				{
    //Si l'élément(option) d'id menu$i existe
    					if (document.getElementById("menu_"+i) == true)
    					{
    //Si il est sélectionné					
    						if (document.getElementById("menu_"+i).selected)
    //on rempli le tableau 					{
    							isInsideSelectedOption[i] = true;
    //Parcours des balises option
    							for(var j=0; j<option.length; j++)
    							{
    //Si l'option a pour classe sousMenu$i
    								if(option[j].className == "sousMenu_"+i)
    								 {
    //On ajoute l'attribut selected à la balise option
    									 option[j].selected = true
    // On rempli le tableau sous menu									 isInsideSelectedSsOption[j] = true
    								 }	
     
    							}	
     
    						}
    						else
    						{
    							isInsideSelectedOption[i] = true;
    							for(var j=0; j<option.length; j++)
    							{
    								if(option[j].className == "sousMenu_"+i)
    								 {
    									 option[j].selected = isInsideSelectedSsOption[j];
     
    								 }	
     
    							}	
     
    						}
    					}
     
    				}
     
    		 }
    Merci beaucoup pour votre aide!!!!

  2. #2
    Membre chevronn� Avatar de nadox
    Homme Profil pro
    D�veloppeur
    Inscrit en
    F�vrier 2010
    Messages
    360
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activit� : D�veloppeur
    Secteur : High Tech - Multim�dia et Internet

    Informations forums :
    Inscription : F�vrier 2010
    Messages : 360
    Par d�faut
    Bonjour,
    C'est possible de voir le code html g�n�r� afin d'avoir un exemple utilisable ?
    Il est sens� faire quoi ce bout de code javascript ? (c'est normal cette boucle sur les options dans un boucle sur les options )

  3. #3
    Membre averti
    Homme Profil pro
    Inscrit en
    Avril 2010
    Messages
    13
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Avril 2010
    Messages : 13
    Par d�faut
    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
    <select class="left" id="interets" name="interet[]"  size="15" multiple onchange="selectInterests()">
     
    				                			<option class="menu_0" id="menu_0"  value="" style="color:#347A9B;font-style:italic;font-weight:bold;">Bureau</option>
                    							<option class="sousMenu_0" value="Fournitures de bureau">--- Fournitures de bureau</option>
                                							<option class="sousMenu_0" value="Mobiliers de bureau">--- Mobiliers de bureau</option>
                                							<option class="sousMenu_0" value="Hygiène et sécurité">--- Hygiène et sécurité</option>
     
                                							<option class="sousMenu_0" value="Distributeurs de boissons">--- Distributeurs de boissons</option>
                                							<option class="sousMenu_0" value="Machines à affranchir et balances">--- Machines à affranchir et balances</option>
                                							<option class="sousMenu_0" value="Equipements et vêtements de travail">--- Equipements et vêtements de travail</option>
                                                			<option class="menu_1" id="menu_1"  value="" style="color:#347A9B;font-style:italic;font-weight:bold;">RH</option>
                    							<option class="sousMenu_1" value="Intérim et recrutement">--- Intérim et recrutement</option>
                                							<option class="sousMenu_1" value="Traduction">--- Traduction</option>
     
                                							<option class="sousMenu_1" value="Fontaine à eau">--- Fontaine à eau</option>
                                							<option class="sousMenu_1" value="Champagne">--- Champagne</option>
                                                			<option class="menu_2" id="menu_2"  value="" style="color:#347A9B;font-style:italic;font-weight:bold;">Telecom</option>
                    							<option class="sousMenu_2" value="Téléphonie mobile">--- Téléphonie mobile</option>
                                							<option class="sousMenu_2" value="Téléphonie Fixe">--- Téléphonie Fixe</option>
                                							<option class="sousMenu_2" value="Internet">--- Internet</option>
     
                                                			<option class="menu_3" id="menu_3"  value="" style="color:#347A9B;font-style:italic;font-weight:bold;">Informatique</option>
                    							<option class="sousMenu_3" value="Imprimantes et copieurs multi-fonctions">--- Imprimantes et copieurs multi-fonctions</option>
                                							<option class="sousMenu_3" value="Consommables informatiques">--- Consommables informatiques</option>
                                							<option class="sousMenu_3" value="Connectiques">--- Connectiques</option>
                                                			<option class="menu_4" id="menu_4"  value="" style="color:#347A9B;font-style:italic;font-weight:bold;">Voyages</option>
                    							<option class="sousMenu_4" value="Agence de voyages">--- Agence de voyages</option>
     
                                							<option class="sousMenu_4" value="Location courte durée de véhicule de tourisme">--- Location courte durée de véhicule de tourisme</option>
                                							<option class="sousMenu_4" value="Location courte durée de véhicule utilitaire">--- Location courte durée de véhicule utilitaire</option>
                                							<option class="sousMenu_4" value="Location longue durée de véhicule">--- Location longue durée de véhicule</option>
                                                			<option class="menu_5" id="menu_5"  value="" style="color:#347A9B;font-style:italic;font-weight:bold;">Industrie</option>
                    							<option class="sousMenu_5" value="Location ou achat de matériels BTP">--- Location ou achat de matériels BTP</option>
                                							<option class="sousMenu_5" value="Equipement de protection individuel">--- Equipement de protection individuel</option>
     
                                							<option class="sousMenu_5" value="Emballage">--- Emballage</option>
                                                			<option class="menu_6" id="menu_6"  value="" style="color:#347A9B;font-style:italic;font-weight:bold;">Services</option>
                    							<option class="sousMenu_6" value="Contrôles réglementaires">--- Contrôles réglementaires</option>
                                							<option class="sousMenu_6" value="Extincteurs">--- Extincteurs</option>
                                							<option class="sousMenu_6" value="Objets publicitaires">--- Objets publicitaires</option>
                                							<option class="sousMenu_6" value="Géolocalisation">--- Géolocalisation</option>
     
     
    						</select>
    D�sol� pour le retard!

    Voila le code g�n�r� en html, en effet c'est peut �tre mieux comme �a .

    Sinon pour mes boucles JS, comme tu le vois dans le html g�n�r�, j'ai d'une part mes menus qui ont un id donc facilement r�cup�rables et mes diff�rents sous menus avec une classe commune pour les sous menus d'un m�me menu et comme j'ai l'impression que la fonction getElementByClassName n'est pas utilisable sur tous les navigateurs, j'ai fais une recherche sur toutes les balises <option>

    J'esp�re avoir �t� clair

  4. #4
    R�dacteur/Mod�rateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par d�faut
    Bonsoir

    if (document.getElementById("menu_"+i) == true)
    document.getElementById retourne un �l�ment du DOM si �a existe, tu ne peux pas le comparer avec un bool�en.

    A+.

  5. #5
    Membre �clair� Avatar de Billy KiT
    Inscrit en
    Mars 2011
    Messages
    66
    D�tails du profil
    Informations forums :
    Inscription : Mars 2011
    Messages : 66
    Par d�faut
    Salut,
    tu peux essayer �a pour te convaincre que c'est du d�lire
    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
    <script type="text/javascript">
    window.onload=function() {
      multiple("interets");
    };
     
    var opts = [];
     
    function multiple(el) {
    	if (typeof el=="string") { el = document.getElementById(el); }
     
    	for (var i = 0; i < el.options.length; i++) {
    		el.options[i].selected = false;
    		opts[i] = false;
    	}
     
    	el.onchange = function() {
    		oi = this.options[this.options.selectedIndex];
    		for (var i = 0; i < this.options.length; i++) {
    			opts[i] = (opts[i] && !this.options[i].selected) || (!opts[i] && this.options[i].selected);
    			this.options[i].selected = opts[i];
    		}
    		if (oi.className.substr(0,4)=="menu" && oi.selected) active(oi.nextSibling.nextSibling);
    		else if (oi.className.substr(0,4)=="menu" && !oi.selected) desactive(oi.nextSibling.nextSibling);
    	};
    }
     
    function active(oo) {
    	if (oo.className.substr(0,4)=='sous') {
    		oo.selected=true;
    		opts[oo.index]=true;
    		active(oo.nextSibling.nextSibling);
    		}
    	}
     
    function desactive(oo) {
    	if (oo.className.substr(0,4)=='sous') {
    		oo.selected=false;
    		opts[oo.index]=false;
    		desactive(oo.nextSibling.nextSibling);
    		}
    	}
    </script>
    Hormis des probl�mes de scrolling vraiment intempestifs (sauf Chrome), �a fait ce que tu as demand�.
    Mais �a fait mal aux yeux les multiselect , je ne saurai trop te conseiller de te tourner plut�t vers des checkbox ...

  6. #6
    Membre averti
    Homme Profil pro
    Inscrit en
    Avril 2010
    Messages
    13
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Avril 2010
    Messages : 13
    Par d�faut
    Merci beaucoup, c'est exactement ce qu'il me fallait.

    je ne sais pas comment mettre la discussion en r�solu!

+ R�pondre � la discussion
Cette discussion est r�solue.

Discussions similaires

  1. mauvaise suppression dans un select multiple
    Par tarmo57 dans le forum D�buter
    R�ponses: 11
    Dernier message: 22/09/2012, 18h02
  2. Comment ins�rer une nouvelle option dans un select multiple avec les [] ?
    Par vikings dans le forum G�n�ral JavaScript
    R�ponses: 3
    Dernier message: 08/06/2010, 14h42
  3. Selection multiple dans un select multiple
    Par NizarK dans le forum G�n�ral JavaScript
    R�ponses: 18
    Dernier message: 27/02/2009, 10h58
  4. tous selectionn� dans un select multiple
    Par yngwie44 dans le forum G�n�ral JavaScript
    R�ponses: 7
    Dernier message: 28/08/2007, 15h54

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