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:

<selectname="event_icon"id="event_icon"><option>Select An Icon</option><optionvalue="vaisakhi.jpg"data-style="background-image: url('icons/vaisakhi.jpg');"></option><optionvalue="cake.png"data-style="background-image: url('icons/cake.png');"></option><optionvalue="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><optionstyle="background-image:url(male.png);">male</option><optionstyle="background-image:url(female.png);">female</option><optionstyle="background-image:url(others.png);">others</option></select>