Contenu DIV selon choix OPTION liste déroulante

Résolu/Fermé
AnhTuanFevre Messages postés 219 Date d'inscription samedi 17 janvier 2015 Statut Membre Dernière intervention 24 juillet 2015 - 18 mars 2015 à 10:31
AnhTuanFevre Messages postés 219 Date d'inscription samedi 17 janvier 2015 Statut Membre Dernière intervention 24 juillet 2015 - 18 mars 2015 à 11:45
Bonjour,

J'aimerai savoir comment peut-on afficher un DIV selon le choix dans une liste déroulante.
C'est-à-dire que j'ai une liste déroulante où il y a mes OPTION et que lorsque le visiteur choisit par exemple OPTION 1, le DIV par défaut en dessous de ma liste déroulante change et devient DIV 1.

Il me semble qu'il faut du JavaScript mais je ne trouve pas sur Internet ce que je cherche précisément.

Merci d'avance !
A voir également:

1 réponse

jordane45 Messages postés 38321 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 1 décembre 2024 4 707
18 mars 2015 à 11:20
Bonjour,

Déclencher une action lors du choix dans une liste déroulante :
=> méthode : ONCLICK
(et oui... il faudra du javascript)

ce qui donne :
<html>
<head>
<title>TEST</title>
</head>
<body>


<script type="text/javascript">
function afficheDiv(idDiv){
 //on masque toutes les DIV
 HideByClassName('mesDiv');
if(idDiv!=0){
//on affiche celle qu'on a choisi
 var elm = document.getElementById(idDiv);
 elm.style.display='block';
}
}

function HideByClassName(className){

 // Loop through each element with the class name of slidePanel
    var elementList = document.getElementsByClassName(className);

    // Iterate through each element in the array
    for (i = 0; i< elementList.length; i++) {
  
        var ele = elementList[i];
          console.log(ele.id);
        ele.style.display='none';
    }

}
</script>



<select name="maliste" onclick="afficheDiv(this.value);">
<option value="0"> Choisir une div </option>
<option value="div1">div1</option>
<option value="div2">div2</option>
</select>

<div id="div1" class="mesDiv" style="display:none">
 ceci est la div 1
</div>

<div id="div2" class="mesDiv" style="display:none">
 ceci est la div 2
</div>


</body>
</html>


1
AnhTuanFevre Messages postés 219 Date d'inscription samedi 17 janvier 2015 Statut Membre Dernière intervention 24 juillet 2015 16
18 mars 2015 à 11:45
Je vais étudier ce code après. Merci de ta réponse ;)
0