Liste déroulante avec image

Fermé
LMBA Messages postés 12 Date d'inscription mardi 21 août 2012 Statut Membre Dernière intervention 5 avril 2014 - 22 août 2012 à 17:39
LMBA Messages postés 12 Date d'inscription mardi 21 août 2012 Statut Membre Dernière intervention 5 avril 2014 - 23 août 2012 à 15:44
Bonjour,


je veux créer une liste déroulante en mettant des images correspondante aux noms de la listes déroulante.
mon code de liste déroulante est :

<option value="1">AIRFRANCE</option>
<option value="2">BOUYGUES</option>
<option value="3">RATP</option>
<option value="4">SNCF</option>
<option value="5">VEOLIA</option>

le but est de mettre à coté de chaque nom de l'entreprise son logo

merci de votre aide?

4 réponses

Penicilline28 Messages postés 52 Date d'inscription samedi 21 juillet 2012 Statut Membre Dernière intervention 2 juillet 2013 6
23 août 2012 à 15:02
Alors en utilisant le Javascript tu pourras afficher une image grâce au "Onchange".


Je te mets un exemple que j'avais fait il y a quelques mois pour un site :

<HTML>

<SELECT onchange="selectChangestate(this)" name="state" >
<OPTION VALUE="undefined"><SELECTED>Choose</SELECTED></OPTION>
<OPTION VALUE="1 - Open">Open</OPTION>
<OPTION VALUE="2 - In progress">In Progress</OPTION>
<OPTION VALUE="3 - Waiting">Waiting</OPTION>
<OPTION VALUE="4 - Done">Done</OPTION>
</SELECT>

<img id="1 - Open" style="display:none;" src="/images/rouge.png"/>
<img id="2 - In progress" style="display:none;" src="/images/orange.png"/>
<img id="3 - Waiting" style="display:none;" src="/images/jaune.png"/>
<img id="4 - Done" style="display:none;" src="/images/vert.png"/>

</HTML>



<JAVASCRIPT>

function selectChangestate(selected){

var _val = selected.options[selected.selectedIndex].value;
var display = "none";
if ( _val == "1 - Open"){
display = "block";
}

document.getElementById("1 - Open").style.display = display;

var _val = selected.options[selected.selectedIndex].value;
var display = "none";
if ( _val == "2 - In progress"){
display = "block";
}

document.getElementById("2 - In progress").style.display = display;

var _val = selected.options[selected.selectedIndex].value;
var display = "none";
if ( _val == "3 - Waiting"){
display = "block";
}

document.getElementById("3 - Waiting").style.display = display;

var _val = selected.options[selected.selectedIndex].value;
var display = "none";
if ( _val == "4 - Done"){
display = "block";
}

document.getElementById("4 - Done").style.display = display;
}

</JAVACRIPT>







Prend exemple la dessus si tu veux, et si tu a des questions n'hésite surtout pas.
1
Penicilline28 Messages postés 52 Date d'inscription samedi 21 juillet 2012 Statut Membre Dernière intervention 2 juillet 2013 6
23 août 2012 à 14:31
Salut,

si tu souhaite rester en HTML, il me semble que ce n'est pas possible de l'intégrer directement dans la liste car les liste déroulante HTML ne le gère pas.

Par contre en jQuery ça doit être possible, tu peut aussi afficher une image, en fonction de ce que tu viens de sélectionner dans ta liste, à coté de la liste grâce au javascript.
0
LMBA Messages postés 12 Date d'inscription mardi 21 août 2012 Statut Membre Dernière intervention 5 avril 2014
23 août 2012 à 14:51
salut,

oui je souhaite rester en html, en faite je dois récupérer les noms et les images dans une table. Toute façon si je réussis à afficher ça dans ma page, ça serait bien même en utilisant du javascript.

Cdt
0
LMBA Messages postés 12 Date d'inscription mardi 21 août 2012 Statut Membre Dernière intervention 5 avril 2014
23 août 2012 à 15:44
salut,

merci, je vais essayer pour l'instant je suis bloqué sur un popup;
0