Liste déroulante avec image
LMBA
Messages postés
17
Statut
Membre
-
LMBA Messages postés 17 Statut Membre -
LMBA Messages postés 17 Statut Membre -
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?
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
-
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. -
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. -
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 -
salut,
merci, je vais essayer pour l'instant je suis bloqué sur un popup;
