Skip to main content
replaced http://stackoverflow.com/ with https://stackoverflow.com/
Origen Enlace

En base a la respuestarespuesta de stack over flow en ingles :

En base a la respuesta de stack over flow en ingles :

En base a la respuesta de stack over flow en ingles :

se añadieron 2971 caracteres en el cuerpo
Origen Enlace
sioesi
  • 11.5k
  • 7
  • 26
  • 57

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>

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>

se añadieron 58 caracteres en el cuerpo
Origen Enlace
sioesi
  • 11.5k
  • 7
  • 26
  • 57

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.

Jamas va a funcionar, ya que entregas un href de 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 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.

Origen Enlace
sioesi
  • 11.5k
  • 7
  • 26
  • 57
Loading