Putting images with options in a dropdown list

Question

I was trying to insert images in a drop down list. I tried the following code but its not working. What is the best way to achieve this?

<select>
  <option value="volvo"><IMG src="a.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Volvo</option>
  <option value="saab"><IMG src="b.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Saab</option>
  <option value="mercedes"><IMG src="c.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Mercedes</option>
  <option value="audi"><IMG src="d.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Audi</option>
</select>

Make sure to review [this detailed answer](http://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list#answer-2966006) ,too — behkod, Feb 28 '17 at 15:56

score 23 · Answer 1 · edited Jun 20 '20 at 09:12

23

You can't do that in plain HTML, but you can do it with jQuery:

JavaScript Image Dropdown

Are you tired with your old fashion dropdown? Try this new one. Image combo box. You can add an icon with each option. It works with your existing "select" element or you can create by JSON object.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 09 '11 at 03:27

Nick

3,096
3
20
25

Works perfectly and am using it with a WordPress plugin. Nice tip. – brasofilo Aug 25 '13 at 21:14
6

@MichaelHanon - could you explain why? – Karol Selak Aug 16 '17 at 14:31

score 22 · Accepted Answer · edited Apr 07 '18 at 05:30

22

This code will work only in Firefox:

<select>
    <option value="volvo" style="background-image:url(images/volvo.png);">Volvo</option>
    <option value="saab"  style="background-image:url(images/saab.png);">Saab</option>
    <option value="honda" style="background-image:url(images/honda.png);">Honda</option>
    <option value="audi"  style="background-image:url(images/audi.png);">Audi</option>
</select>

Edit (April 2018):

Firefox does not support this anymore.

edited Apr 07 '18 at 05:30

Roshana Pitigala

8,437
8
49
80

answered Aug 08 '11 at 09:00

JiBKas

308
2
2

7

Firefox does not support this anymore. – Roshana Pitigala Apr 06 '18 at 17:14
Firefox, WHY?!?! :'( – sqram Dec 06 '19 at 19:42

score 14 · Answer 3 · edited Dec 06 '19 at 12:54

This is exactly what you need. See it in action here 8FydL/445

Example's Code below:

     $(".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");

    .desc { color:#6b6b6b;}
    .desc a {color:#0092dd;}
    
    .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
    .dropdown dd { position:relative; }
    .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
    .dropdown a:hover { color:#5d4617;}
    .dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
    .dropdown dt a {background:#e4dfcb url('http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/arrow.png') no-repeat scroll right center; display:block; padding-right:20px;
                    border:1px solid #d4ca9a; width:150px;}
    .dropdown dt a span {cursor:pointer; display:block; padding:5px;}
    .dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; 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 dd ul li a:hover { background-color:#d0c9af;}
    
    .dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
    .flagvisibility { display:none;}

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
        <dl id="sample" class="dropdown">
            <dt><a href="#"><span>Please select the country</span></a></dt>
            <dd>
                <ul>
                    <li><a href="#">Brazil<img class="flag" src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/br.png" alt="" /><span class="value">BR</span></a></li>
                    <li><a href="#">France<img class="flag" src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/fr.png" alt="" /><span class="value">FR</span></a></li>
                   
                </ul>
            </dd>
        </dl>
        <span id="result"></span>

trying to make it work, but the initial click simply refreshes my page. This part here, I mean - ` $('.curr-dropdown').bind('click', function (e) { var $clicked = $(e.target); debugger; if (!$clicked.parents().hasClass("dropdown")) { $(".curr-dropdown dd ul").hide(); } });` — bob.mazzo, Nov 26 '14 at 17:33
This idea seems to be the best one presented, but there is an issue I'm getting with the Javascript/Jquery section that it will show the menu, but the onClick event does not work, the menu is not opened and no drop down menu becomes visible, is there any update to this code at all as this post was in 2014, and it's currently mid 2016? — Michael Voulgaris, Jul 29 '16 at 05:07
This is awesome! The only solution I could get working properly in all browsers without plugins etc (although not tested on legacy browsers). — SharpC, Nov 19 '16 at 18:14
@MichaelVoulgaris Probably a little late to the party but the onClick not working problem can be rectified by placing the js part **after** the html part — Amber, Nov 17 '17 at 05:06
Thanks so much for this code. I was able to adapt it to my own needs :) — Mark Highton Ridley, Mar 20 '20 at 21:45

score 9 · Answer 4 · answered Feb 09 '11 at 03:27

9

You need to achieve that using CSS

http://binnyva.blogspot.com/2006/01/icons-for-select-menu-options-in.html

answered Feb 09 '11 at 03:27

Sarwar Erfan

18,034
5
46
57

Cool, didn't know you could do it with CSS. It does look to be incompatible with IE which makes it less useful however. – Nick Feb 09 '11 at 03:32
1

Please add demo here. – Vitaly Zdanevich Mar 16 '20 at 08:47

score 8 · Answer 5 · answered Dec 02 '14 at 14:50

folks, I got this Bootstrap dropdown working. I modified the click event slightly in order to keep the currently-selected image. And as you see, the USD currency is the default selected :

<div class="btn-group" style="margin:10px;">    <!-- CURRENCY, BOOTSTRAP DROPDOWN -->
                <!--<a class="btn btn-primary" href="javascript:void(0);">Currency</a>-->                    
                <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><img src="../../Images/flag-usd-small.png"> USD <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="javascript:void(0);">
                        <img src="../../Images/flag-aud-small.png" /> AUD</a>
                    </li>
                    <li><a href="javascript:void(0);">
                        <img src="../../Images/flag-cad-small.png" /> CAD</a>
                    </li>
                    <li><a href="javascript:void(0);">
                        <img src="../../Images/flag-cny-small.png" /> CNY</a>
                    </li>
                    <li><a href="javascript:void(0);">
                        <img src="../../Images/flag-gbp-small.png" /> GBP</a>
                    </li>
                    <li><a href="javascript:void(0);">
                        <img src="../../Images/flag-usd-small.png" /> USD</a>
                    </li>
                </ul>
            </div>


/* BOOTSTRAP DROPDOWN MENU - Update selected item text and image */
$(".dropdown-menu li a").click(function () {
    var selText = $(this).text();
    var imgSource = $(this).find('img').attr('src');
    var img = '<img src="' + imgSource + '"/>';        
    $(this).parents('.btn-group').find('.dropdown-toggle').html(img + ' ' + selText + ' <span class="caret"></span>');
});

score 7 · Answer 6 · answered Oct 25 '16 at 13:34

Checkout And Run The Following Code. It will help you...

 $( function() {
    $.widget( "custom.iconselectmenu", $.ui.selectmenu, {
      _renderItem: function( ul, item ) {
        var li = $( "<li>" ),
          wrapper = $( "<div>", { text: item.label } );
 
        if ( item.disabled ) {
          li.addClass( "ui-state-disabled" );
        }
 
        $( "<span>", {
          style: item.element.attr( "data-style" ),
          "class": "ui-icon " + item.element.attr( "data-class" )
        })
          .appendTo( wrapper );
 
        return li.append( wrapper ).appendTo( ul );
      }
    });
 
    $( "#filesA" )
      .iconselectmenu()
      .iconselectmenu( "menuWidget" )
        .addClass( "ui-menu-icons" );
 
    $( "#filesB" )
      .iconselectmenu()
      .iconselectmenu( "menuWidget" )
        .addClass( "ui-menu-icons customicons" );
 
    $( "#people" )
      .iconselectmenu()
      .iconselectmenu( "menuWidget")
        .addClass( "ui-menu-icons avatar" );
  } );
  </script>
  <style>
    h2 {
      margin: 30px 0 0 0;
    }
    fieldset {
      border: 0;
    }
    label

{
      display: block;
    }
 
    /* select with custom icons */
    .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
      padding: 0.5em 0 0.5em 3em;
    }
    .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
      height: 24px;
      width: 24px;
      top: 0.1em;
    }
    .ui-icon.video {
      background: url("images/24-video-square.png") 0 0 no-repeat;
    }
    .ui-icon.podcast {
      background: url("images/24-podcast-square.png") 0 0 no-repeat;
    }
    .ui-icon.rss {
      background: url("images/24-rss-square.png") 0 0 no-repeat;
    }
 
    /* select with CSS avatar icons */
    option.avatar {
      background-repeat: no-repeat !important;
      padding-left: 20px;
    }
    .avatar .ui-icon {
      background-position: left top;
    }

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Custom Rendering</title>
  
</head>
<body>
 
<div class="demo">
 
<form action="#">
  <h2>Selectmenu with framework icons</h2>
  <fieldset>
    <label for="filesA">Select a File:</label>
    <select name="filesA" id="filesA">
      <option value="jquery" data-class="ui-icon-script">jQuery.js</option>
      <option value="jquerylogo" data-class="ui-icon-image">jQuery Logo</option>
      <option value="jqueryui" data-class="ui-icon-script">ui.jQuery.js</option>
      <option value="jqueryuilogo" selected="selected" data-class="ui-icon-image">jQuery UI Logo</option>
      <option value="somefile" disabled="disabled" data-class="ui-icon-help">Some unknown file</option>
    </select>
  </fieldset>
 
  <h2>Selectmenu with custom icon images</h2>
  <fieldset>
    <label for="filesB">Select a podcast:</label>
    <select name="filesB" id="filesB">
      <option value="mypodcast" data-class="podcast">John Resig Podcast</option>
      <option value="myvideo" data-class="video">Scott González Video</option>
      <option value="myrss" data-class="rss">jQuery RSS XML</option>
    </select>
  </fieldset>
 
  <h2>Selectmenu with custom avatar 16x16 images as CSS background</h2>
  <fieldset>
    <label for="people">Select a Person:</label>
    <select name="people" id="people">
      <option value="1" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&amp;r=g&amp;s=16&apos;);">John Resig</option>
      <option value="2" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&amp;r=g&amp;s=16&apos;);">Tauren Mills</option>
      <option value="3" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&amp;r=g&amp;s=16&apos;);">Jane Doe</option>
    </select>
  </fieldset>
</form>
 
</div>
 
 
</body>
</html>

This is just copied from jqueryui yes? – MyDaftQuestions Sep 10 '22 at 11:46 — MyDaftQuestions, Sep 10 '22 at 11:46

score 6 · Answer 7 · answered Mar 14 '14 at 07:13

6

I have found a crossbrowser compatible JQuery plugin here.

http://designwithpc.com/Plugins/ddSlick

probably useful in this scenario.

answered Mar 14 '14 at 07:13

Clain Dsilva

1,631
3
25
34

score 0 · Answer 8 · edited Sep 11 '20 at 00:43

0

I found a lot of people recommending ddSlick.js it seems to be a really cool option ! unfortunately it doesnt work as expected for me, maybe I didn't know how to integrate it, today I discovered a library like bootstrap named : MaterialiseCss so I returned to this section to help !!

https://materializecss.com/select.html
https://materializecss.com/dropdown.html

edited Sep 11 '20 at 00:43

Tomer Shetah

8,413
7
27
35

answered Sep 10 '20 at 21:04

Hicham O-Sfh

731
10
12

Putting images with options in a dropdown list

8 Answers8

JavaScript Image Dropdown

Linked

Related