[Résolu] Choix liste deroulante

Bonjour à tous,

J'ai un petit souci en jquery concernant le choix d'une option dans ma liste déroulante. En effet, j'ai une liste déroulante qui m'affiche des petits logos en fonction du choix. Quand je choisis une option j'affiche le logo dans 2 div côte à côte (en float left). Je le fais et ça marche ! Maintenant j'aimerais à partir de la 3ième option (par exemple) que mon logo s'affiche sur une seule div et que les 2 autres se cachent. Ce que je n'ai pas réussit à faire.

Merci pour votre aide.

Code ci-dessous :

<select name="logos" id="logo">
        <option value="">Choisir votre logo :</option>
        <option value="logo1.jpg">Logo 1</option>
        <option value="logo2.jpg">Logo 2</option>
        <option value="logo3.jpg">Logo 3</option>
        <option value="logo4.jpg">Logo 4</option>
        <option value="logo5.jpg">Logo 5</option>
</select>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

function generateLogos() {
       var which = this.value;
       
        div1.innerHTML='<center>Loading image...</center>';
	div1.innerHTML='<img src="'+which+'" >';

        div2.innerHTML='<center>Loading image...</center>';
	div2.innerHTML='<img src="'+which+'" >';

        div3.innerHTML='<center>Loading image...</center>';
	div3.innerHTML='<img src="'+which+'" >';

        if (which == 'logo3.jpg' || which == 'logo4.jpg' || which == 'logo5.jpg') {
               $("#div3").css("display", "block");
	       $("#div1").css("display", "none");
               $("#div2").css("display", "none");
        } else {
		$("#div3").css("display", "none");
	}
}
$("#logo").find('option').on('mouseover', generateLogos);

Modifié par dinolam (01 Mar 2017 - 14:45)