Html 将带有选项的图像放入下拉列表

我试图在下拉列表中插入图像。我尝试了以下代码，但不起作用。实现这一目标的最佳方式是什么

<select>
  <option value="volvo"><IMG src="a.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Volvo</option>
  <option value="saab"><IMG src="b.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Saab</option>
  <option value="mercedes"><IMG src="c.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Mercedes</option>
  <option value="audi"><IMG src="d.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Audi</option>
</select>

沃尔沃汽车
萨博
梅赛德斯
奥迪

您不能在纯HTML中执行此操作，但可以使用jQuery执行此操作：

你厌倦了你的旧款式了吗？试试这个新的。图像组合框。您可以为每个选项添加一个图标。它与您现有的“select”元素一起工作，或者您可以通过JSON对象创建它

---

您需要使用CSS来实现这一点

---

此代码仅在Firefox中有效：

<select>
    <option value="volvo" style="background-image:url(images/volvo.png);">Volvo</option>
    <option value="saab"  style="background-image:url(images/saab.png);">Saab</option>
    <option value="honda" style="background-image:url(images/honda.png);">Honda</option>
    <option value="audi"  style="background-image:url(images/audi.png);">Audi</option>
</select>

沃尔沃汽车
萨博
本田
奥迪

---

编辑（2018年4月）：

---

Firefox不再支持此功能。

---

我在这里找到了一个与交叉浏览器兼容的JQuery插件

---

在这种情况下可能有用

这正是您需要的。在这里看到它的作用

示例代码如下：

$（“.dropdown img.flag”）.addClass（“flagvisibility”）；
$（“.dropdown dt a”）。单击（函数（）{
$（“.dropdown dd ul”）.toggle（）；
});
$（“.dropdown dd ul li a”）。单击（函数（）{
var text=$（this.html（）；
$（“.dropdown dt a span”）.html（文本）；
$（“.dropdown dd ul”）.hide（）；
$（“#结果”）.html（“选定值为：”+getSelectedValue（“示例”））；
});
函数getSelectedValue（id）{
返回$（“#”+id.find（“dta span.value”）.html（）；
}
$（文档）.bind（'click'，函数（e）{
var$clicked=$（e.target）；
如果（！$clicked.parents（）.hasClass（“下拉菜单”））
$（“.dropdown dd ul”）.hide（）；
});
$（“.dropdown img.flag”）.toggleClass（“flagvisibility”）
.desc{color:#6b；}
.desc a{color:#0092dd；}
.dropdown dd、.dropdown dt、.dropdown ul{margin:0px；padding:0px；}
.下拉列表dd{位置：相对；}
.dropdown a..dropdown a:已访问{颜色：#816c5b；文本装饰：无；大纲：无；}
.下拉列表a:悬停{颜色：#5d4617；}
.dropdown dt a:hover{color:#5d4617；border:1px solid#d0c9af；}
.dropdown dt a{background:#e4dfcb url（'http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/arrow.png'）不重复向右中心滚动；显示：块；右填充：20px；
边框：1px实心#d4ca9a；宽度：150px；}
.dropdown dt a span{光标：指针；显示：块；填充：5px；}
.下拉列表dd ul{背景：#e4dfcb无重复滚动0；边框：1px实心#d4ca9a；颜色：#C5C0B0；显示：无；
左：0px；填充：5px 0px；位置：绝对；顶部：2px；宽度：自动；最小宽度：170px；列表样式：无；}
.dropdown span.value{显示：无；}
.dropdown dd ul li a{padding:5px；display:block；}
.下拉列表dd ul li a:悬停{背景色：#d0c9af；}
.dropdown img.flag{边框：无；垂直对齐：中间；左边距：10px；}
.flagvisibility{display:none；}





各位，
我让这个引导下拉菜单工作。我稍微修改了click事件，以保留当前选定的图像。如您所见，美元是默认选择的货币：

<div class="btn-group" style="margin:10px;">    <!-- CURRENCY, BOOTSTRAP DROPDOWN -->
                <!--<a class="btn btn-primary" href="javascript:void(0);">Currency</a>-->                    
                <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><img src="../../Images/flag-usd-small.png"> USD <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="javascript:void(0);">
                        <img src="../../Images/flag-aud-small.png" /> AUD</a>
                    </li>
                    <li><a href="javascript:void(0);">
                        <img src="../../Images/flag-cad-small.png" /> CAD</a>
                    </li>
                    <li><a href="javascript:void(0);">
                        <img src="../../Images/flag-cny-small.png" /> CNY</a>
                    </li>
                    <li><a href="javascript:void(0);">
                        <img src="../../Images/flag-gbp-small.png" /> GBP</a>
                    </li>
                    <li><a href="javascript:void(0);">
                        <img src="../../Images/flag-usd-small.png" /> USD</a>
                    </li>
                </ul>
            </div>


/* BOOTSTRAP DROPDOWN MENU - Update selected item text and image */
$(".dropdown-menu li a").click(function () {
    var selText = $(this).text();
    var imgSource = $(this).find('img').attr('src');
    var img = '<img src="' + imgSource + '"/>';        
    $(this).parents('.btn-group').find('.dropdown-toggle').html(img + ' ' + selText + ' <span class="caret"></span>');
});














/*引导下拉菜单-更新所选项目文本和图像*/
$（“.下拉菜单LIA”）。单击（函数（）{
var selText=$（this.text（）；
var imgSource=$（this.find（'img'）.attr（'src'）；
var img=“”；
$（this）.parents（'.btn group'）.find（'.dropdown toggle'）.html（img+''+selText+''）；
});
签出并运行以下代码。它会帮助你


$（函数（）{
$.widget（“custom.iconselectmenu”，$.ui.selectmenu{
_renderItem：功能（ul，项目）{
变量li=$（“
”），
包装器=$（“”，{text:item.label}）；
如果（项已禁用）{
li.addClass（“ui状态禁用”）；
}
$( "", {
样式：item.element.attr（“数据样式”），
“类”：“ui图标”+item.element.attr（“数据类”）
})
.附件（包装纸）；
返回li.append（包装器）.appendTo（ul）；
}
});
$（“#文件A”）
.iconselectmenu（）
.iconselectmenu（“菜单Widget”）
.addClass（“ui菜单图标”）；
$（“#文件B”）
.iconselectmenu（）
.iconselectmenu（“菜单Widget”）
.addClass（“ui菜单图标自定义图标”）；
$（“人”）
.iconselectmenu（）
.iconselectmenu（“菜单Widget”）
.addClass（“ui菜单图标化身”）；
} );
氢{
利润率：30px0；
}
字段集{
边界：0；
}
标签
{
显示：块；
}
/*使用自定义图标选择*/
.ui selectmenu.ui-menu.customicons.ui菜单项包装器{
填充：0.5em 0.5em 3em；
}
.ui选择菜单菜单。ui-menu.customicons.ui菜单项。ui图标{
高度：24px；
宽度：24px；
顶部：0.1米；
}
.ui-icon.video{
背景：url（“images/24 video square.png”）0 0 0无重复；
}
.ui-icon.podcast{
背景：url（“images/24 podcast square.png”）0 0无重复；
}
.ui-icon.rss{
背景：url（“images/24 rss square.png”）0 0 0无重复；
}
/*使用CSS头像图标选择*/
选项1.avatar{