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