如何向`<select>`列表中的`<option>`元素添加小缩略图？答案

【问题标题】：How to add small thumbnails to `<option>` elements in a `<select>` list?如何向`<select>`列表中的`<option>`元素添加小缩略图？
【发布时间】：2015-07-29 18:21:47
【问题描述】：

我正在尝试将小缩略图（20x20 像素）添加到 <select> 列表中的 <option> 元素，但我找不到可行的解决方案。

我搜索了 SO 和 Google 并找到了以下示例：

<select>
  <option style="background-image:url(/_assets/_img/thumbnail1.png)">Item 1</option>
  <option style="background-image:url(/_assets/_img/thumbnail2.png)">Item 2</option>
</select>

由于某种原因，它不会加载缩略图。我确保测试了路径并且缩略图确实存在（我在列表之前做了<img src="/_assets/_img/thumbnail1.png"> 以检查图像是否已加载。

任何想法如何做到这一点？

【问题讨论】：

使用 jqueryui jqueryui.com/selectmenu/#custom_render

标签： html css

【解决方案1】：

尽管此处有其他答案，但您无法在所有浏览器中可靠地执行此操作。每个浏览器都以完全不同的方式呈现<select> 字段。最好的办法是使用普通的 HTML 元素伪造一个选择字段，当它发生变化时，用 javascript 更新一个隐藏的选择字段。

看到这个答案 putting images with options in a dropdown list

【讨论】：

有一个 jQuery 插件，比较简单designwithpc.com/Plugins/ddSlick
很好的例子。这已经做了数百次了，OP应该使用插件而不是重新发明轮子。
但是，我只想要这个功能，所以一个插件是主要的矫枉过正
一些插件可能是“严重的过度杀伤力”，但使用插件本身并不是过度杀伤力。在这种情况下，OP 可能会重新创建 HTML