0

I want to display images in dropdown... I'm using tag for this purpose, but it won't show the images...

HTML Code:-

<label for="event_icon">Choose Icon: </label>
                            <select name="event_icon" id="event_icon">
                                <option>Select An Icon</option>
                                <option value="vaisakhi.jpg"><img src="icons/vaisakhi.jpg" width="20px" height="20px"/></option>
                                <option value="cake.png"><img src="icons/cake.png" width="20px" height="20px"/></option>
                                <option value="game.png"><img src="icons/game.png" width="20px" height="20px"/></option>
                            </select>
Jaskirat Kaur
  • 30
  • 1
  • 5

2 Answers2

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>
Ramanjit Singh
  • 73
  • 7
0

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>
Ravi Ubana
  • 397
  • 5
  • 26