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

  1. #1
    Membre à l'essai
    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
    Points : 16
    Points
    16
    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 confirmé 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
    Points : 551
    Points
    551
    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 à l'essai
    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
    Points : 16
    Points
    16
    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
    Points : 15 059
    Points
    15 059
    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 régulier Avatar de Billy KiT
    Inscrit en
    Mars 2011
    Messages
    66
    Détails du profil
    Informations forums :
    Inscription : Mars 2011
    Messages : 66
    Points : 73
    Points
    73
    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 à l'essai
    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
    Points : 16
    Points
    16
    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. 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