Discussion :

[mOscar007]

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<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>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
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+'" >';
 
        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);

[Toufik83]

bonjour,
si j'ai bien compris ce que tu veux faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function generateLogos() {
  var which = this.value,
    div1 = $("#div1"),
    div2 = $("#div2"),
    div3 = $("#div3");
  //console.log(which);
  div1
    .html('<center>Loading image...</center>')
    //.append('<img src="'+which+'" >');
 
  div2.html('<center>Loading image...</center>')
    //.append('<img src="'+which+'" >');
 
  if (which == 'logo3.jpg' || which == 'logo4.jpg' || which == 'logo5.jpg') {
    div3.css("display", "block");
    $([div1,div2]).each(function(){$(this).css("display", "none")});
  } else {
    div3.css("display", "none");
     $([div1,div2]).each(function(){$(this).css("display", "block");});
  }
}
$("#logo").on('change', generateLogos);

[mOscar007]

Bonjour @Toufik83,

Merci pour ta réponse.
C'est exactement ce dont j'ai besoin.

A bientôt !

Cdlt,