Question

我想在下拉列表中显示图片...我为此目的使用标记，但它不会显示图像......

HTML代码： -

with open("file.txt") as f:
    lines=f.readlines()
    for i in lines:
        if i.__contains__("START"):
            print i

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>

想要在下拉列表中显示图像/图标

2 个答案: