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