Want To Show Image/icons In Dropdown List

I want to display images in dropdown... I'm using tag for this purpose, but it won't show the images... HTML Code:- Choose Icon:

Solution 1:

html:

<select name="event_icon" id="event_icon">
                                   <option>Select An Icon</option>
                                   <option value="vaisakhi.jpg" data-style="background-image: url('icons/vaisakhi.jpg');"></option>
                                   <option  value="cake.png"  data-style="background-image: url('icons/cake.png');"></option>
                                   <option value="game.png" data-style="background-image: url('icons/game.png');"></option>
                               </select>

script:

<script>
  $(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);
           }
       });


       $("#event_icon")
               .iconselectmenu()
               .iconselectmenu("menuWidget")
               .addClass("ui-menu-icons avatar");
   });
</script>

Solution 2:

You can try this

<select>
<option style="background-image:url(male.png);">male</option>
<option style="background-image:url(female.png);">female</option>
<option style="background-image:url(others.png);">others</option>
</select>