En base a la respuesta de stack over flow en ingles :
Jamas va a funcionar, ya que entregas un href
de la imagen a una etiqueta <a>
, debes darle al <option>
la imagen, intenta con esto :
<select>
<option value="100" style="background-image:url(images/anillo.png);"></option>
<option value="100" style="background-image:url(images/utileria.png);"></option>
<option value="100" style="background-image:url(images/joyeria.jpg);"></option>
</select>
En la respuesta a la que hice referencia, te explican ademas como conseguir esto a nivel de css
, sin embargo, dudo que te sirva ya que tienes mas de 255 imagenes las cuales quieren listar en un selector.
EDICION
Tal como comento @blonfu no en todos los navegadores es posible realizar esta accion asi de simple, lo mejor es crear y ocupar otros elementos html para llegar al resultado que esperas, este codigo te puede servir para empezar, obviamente modificando css!
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$(".dropdown img.flag").toggleClass("flagvisibility");
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#000000; text-decoration:none; outline:none;}
.dropdown dt a {background: url('http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/arrow.png') no-repeat scroll right center; display:block; padding-right:20px;
width:150px;}
.dropdown dt a span {cursor:pointer; display:block; padding:5px;}
.dropdown dd ul { background: none repeat scroll 0 0; color:#C5C0B0; display:none;
left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;}
.dropdown img.flag { vertical-align:middle; margin-right:10px; float:left;}
.flagvisibility { display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl id="sample" class="dropdown">
<dt><a href="#"><span>Seleccione : </span></a></dt>
<dd>
<ul>
<li><a href="#">Imagen 1<img class="flag" style="width:70px;" src="http://sports.kekava.lv/sa/wp-content/uploads/2016/09/futbola-bumba.png" alt="" /><span class="value">BR</span></a></li>
<li><a href="#">Imagen 2<img class="flag" style="width:70px;" src="http://sports.kekava.lv/sa/wp-content/uploads/2016/09/futbola-bumba.png" alt="" /><span class="value">FR</span></a></li>
</ul>
</dd>
</dl>
option
(al menos no una solución que te vaya a funcionar en todos los navegadores). De todos modos, con el código que tienes no se mostraría imagen nunca, porque directamente no hay imagen (hay un enlace, no una imagen). Seguramente vas a tener que usar JS o reescribir la select para simularla usando HTML+CSS.