lundi 15 juin 2009

[javascript] Afficher le cadre sélectionné dans une liste déroulante

Soit une liste déroulante présentant un certain nombre d'items. Je veux, losqu'un item est choisi dans la liste, que le cadre correspondant s'affiche juste en dessous.

Le script issu de "toutjavascript.com"


<script language="javascript">
//D'autres scripts sur http://www.toutjavascript.com
//Si vous utilisez ce script, merci de m'avertir !
var encours="";
function AffLayer(liste) {
var nomlayer=liste.options[liste.selectedIndex].value;
if (document.all) {
if (encours!="") {document.all[encours].style.visibility="hidden";}
encours=nomlayer;
if (nomlayer!="") {document.all[encours].style.visibility="visible";}
}
if (document.layers) {
if (encours!="") {document.layers[encours].visibility="hide";}
encours=nomlayer;
if (nomlayer!="") {document.layers[encours].visibility="show";}
}
if (document.getElementById) {
if (encours!="") {document.getElementById(encours).style.visibility="hidden";}
encours=nomlayer;
if (nomlayer!="") {document.getElementById(encours).style.visibility="visible";}
}
}
</script>


Le code HTML



<form>
<select name="liste" onchange='AffLayer(this)'>
<option value="">Choisissez un item</option>
<option value="layer1">Premier item</option>
<option value="layer2">Deuxième item item</option>
</select>
</form>

<div id="layer1" style="position:absolute; visibility:hidden;">
Contenu du cadre correspondant au premier item
</div>

<div id="layer2" style="position:absolute; visibility:hidden;">
Contenu du cadre correspondant au deuxième item
</div>


Exemple en fonctionnement ici.

0 commentaires: