[Résolu] Tutoriel : Faire une liste déroulante (<select>) avec des icônes différentes sur chaque entrées (<option>)

Eh bien pour ça, on aura besoin de trois fichiers : un fichier html (index.html) et son fichier css (style.css), et d'un fichier JS (liste.js).

Pour notre fichier HTML, rien de plus simple, on inclue notre fichier CSS, on pond notre liste déroulante sous forme de select, puis on inclue notre fichier JS, ce qui donne :
index.html

<link rel="stylesheet" href="style.css" />
<div data-info="info8" class="info" id="select-language">
	<select>
		<option value="fr" data-image="images/drapeau-fr.png" selected>Français</option>
		<option value="en" data-image="images/drapeau-en.png">English</option>
		<option value="de" data-image="images/drapeau-de.png">Deutch</option>
		<option value="es" data-image="images/drapeau-es.png">Espanol</option>
	</select>
</div>
<script type="text/javascript" src="liste.js"></script>

Puis notre fichier css :
style.css

select{
color:#666;
border:1px solid #ccc;
font-size:14px;
padding:6px 8px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
width:317px;
background-color:#f8f8f8;
}
#select-language{
width:317px;
}
.div_option{
color:#666;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
font-size:14px;
padding:6px 8px;
width:317px;
height:26px;
background-color:#f8f8f8;
background-repeat:no-repeat;
background-position:10px center;
padding-left:30px;
}
.div_option:hover{
color:white;
background-color:#86c440;
cursor:pointer;
}
.div_aff_option{
color:#666;
border:1px solid #ccc;
font-size:14px;
padding:6px 8px;
width:317px;
height:26px;
background-color:#f8f8f8;
background-repeat:no-repeat;
background-position:10px center;
padding-left:30px;
}
.div_aff_option:hover{
cursor:pointer;
}
.arrow_down_select{
width:21px;
height:21px;
left:329px;
position:relative;
top:34px;
}
.arrow_down_select:hover{
cursor:pointer;
}

Et notre fichier JS :
liste.js

$("#select-language").append("<img class='arrow_down_select' src='images/arrow_down_alt1_32x32.png'>");
$("#select-language").find("select").hide();
$("#select-language").find("select option").each(function() {
	var html = "<div id='select-aff-" + $(this).val() + "' style='background-image: url(\"" + $(this).data("image") + "\");display: none;' class='div_aff_option'><span class='txt-select'>" + $(this).html() + "</span></div>";
	$("#select-language").append(html);
});
$("#select-language").find("select option").each(function() {
	var html = "<div id='select-" + $(this).val() + "' style='background-image: url(\"" + $(this).data("image") + "\");display: none;' class='div_option' data-val='" + $(this).val() + "'><span class='txt-select'>" + $(this).html() + "</span></div>";
	$("#select-language").append(html);
});
$("#select-language").find("select option:selected").each(function() {
	$("#select-language").find($("#select-aff-" + $(this).val())).addClass("selected");
	$("#select-aff-" + $(this).val() + ":first").show();
});
$(".div_aff_option").on("click", function() {
	$(".div_option").toggle("fast");
});
$(".arrow_down_select").on("click", function() {
	$(".div_option").toggle("fast");
});
$(".div_option").on("click", function() {
	$(".div_aff_option").hide();
	$("#select-aff-" + $(this).data("val")).show();
	$('#select-language option:selected').removeAttr('selected');
	$("#select-language option[value='" + $(this).data("val") + "']").attr('selected','selected');
	$(".div_option").toggle();
});
$("#select-language").on("mouseleave", function() {
	$(".div_option").hide("fast");
});

Un petit bout d'explication : ligne 1 on ajoute une image qui permettras de déployer la liste déroulante, je vous conseille d'utiliser une flèche vers le bas, c'est l'usage ;). Ligne 3 et 7, on parcourt chaque élément pour ajouter les icônes personnalisées précisées dans le data-image des <option>. Ligne 11, on définit l'élément sélectionné par défaut. Ligne 15 et 18, on gère le comportement déroulant de la liste. Et enfin ligne 21, on gère le comportement de la liste quand un nouvel élément est sélectionné.

Et voilà votre nouvelle liste, peut-être un petit peu compliqué pour une liste déroulante, mais c'est ce que vous demandiez, alors le tour est joué!
Merci Dr. Dino!

Merci !