要显示的图像/图标下拉列表

Question

我想显示下拉图像...我用标签用于此目的，但它不会显示图像...

HTML代码： -

<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> 

Answer 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> 
    $(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> 

Answer 2

你可以试试这个

<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>