Sélection personnalisée en javascript dans un select multiple [Résolu]

david64 · 25/03/2011, 12h04

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

nadox · 25/03/2011, 18h18

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

)

david64 · 04/04/2011, 19h33

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

andry.aime · 05/04/2011, 17h58

Bonsoir

Citation:

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+.

Billy KiT · 06/04/2011, 02h07

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

david64 · 06/04/2011, 13h45

Merci beaucoup, c'est exactement ce qu'il me fallait.

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

25/03/2011, 18h18	#2
nadox Membre expérimenté Développeur Inscription : février 2010 Messages : 360 Détails du profil Informations personnelles : Sexe : 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 : 545 Points : 545	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 )
	00

06/04/2011, 13h45	#6
david64 Invité de passage Inscription : avril 2010 Messages : 8 Détails du profil Informations forums : Inscription : avril 2010 Messages : 8 Points : 1 Points : 1	Merci beaucoup, c'est exactement ce qu'il me fallait. je ne sais pas comment mettre la discussion en résolu!
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email