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