Il est souvent plus aisé d'appeler une fonction ne serait-ce que pour cacher les containers déjà affichés.
Ceux-ci doivent cependant avoir des identifiants uniques qu'il serait bon de retrouver dans les values des options soit intégralement soit sous forme de préfixes ou suffixes (que l'on pourrait obtenir avec des instructions substring).
Dans le première hypothèse (identifiants dans les values) cela prendrait alors la forme indiquée ci-après.
Code HTML :
// Dans le document
<select name="zs_secteur" onchange="newSecteur(this)">
Code Javascript :
// Dans le script associé
<script type="text/javascript>
// le s représente ici l'objet select désigné à l'appel par this
function newSecteur(s){var i;
// cacher tous les containers
for (i=0;i<s.options.length;i++) document.getElementById(s.options[i].value)='none';
// afficher celui correspondant au select
document.getElementById(s.options[s.selectedIndex.value])='block';
}
</script>Pour éviter la boucle sur tous les containers, l'on pourrait aussi retenir dans une variable globale l'identifiant du container ouvert (supposé inexistant à l'ouverture). Cela donnerait alors la variante suivante
Code Javascript :
var cntSlc='';
function newSecteur(s){var i;
// Cacher le container ouvert (s'il existe)
if (cntSlc) document.getElementById(cntSlc)='none';
// Noter l'identifiant du container ouvert
cntSlc=s.options[s.selectedIndex.value];
// L'ouvrir effectivement
document.getElementById(cntSlc)='block';
}