Bon je viens de me faire une petite fonction je la mets la, ça pourra servir, il faut la librairie prototype pour ceux qui connaissent pas http://www.prototypejs.org/ :
Mes selects :
Code :
<select id="type" name="type">
<option value="COT">Cotisation</option>
<option value="ENS">Enseignement</option>
</select>
<select id="sous_type" name="sous_type">
</select>
|
Le select#type doit changer le contenu du select#sous_type
Je déclare donc un hash qui défini quelles options du second select doivent apparaitre en fonction de celle choisie dans le premier.
Code :
var typesFormule = $H( { 'COT': $H({'AB': 'Abonnement', 'CT': 'Carnet de Ticket'}), 'ENS': $H({'CO': 'Cours', 'ST': 'Stage'}) } );
|
Ma fonction générique pour changer le contenu d'un select en fonction d'un autre :
Code :
/* *Fonction permettant de gérer la dépendance entre deux select *@param selectChange element select sur lequel le "onchange" est observé *@param selectToChange element select pour lequel on veut changer les options *@param hashValues hash définissant les dépendance entre les options du 1er select et celles du second * Voir exemple de "typeFormule plus haut" pour la construction du hash */ function selectDependants(selectChange, selectToChange, hashValues) { var i=0; selectToChange.innerHTML = ''; hashValues.get(selectChange.value).each(function(item) { selectToChange.options[i] = new Option(item.value,item.key); i++; } ); }
|
Puis au chargement :
Code :
document.observe("dom:loaded", function() { //Initialisation du sous type selectDependants($('type'), $('sous_type'), typesFormule); //On observe le onchange sur le select "type" pour changer le sous types $('type').observe("change", function() { selectDependants($('type'), $('sous_type'), typesFormule); } ); } );
|
Voila, je veux bien des remarques si certains en ont.
Message édité par Alisteroid le 21-01-2009 à 16:03:25