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

Question

我试图将小缩略图图像（20x20像素）添加到＆lt; option＆gt; ＆lt; select＆gt;中的元素列表，但我找不到有效的解决方案。 我搜索了SO和Google，发现了以下示例： ＆LT;选择＆GT;   ＆lt; option style =＆＃34; background-image：url（/ _ assets / _img / thumbnail1.png）＆＃34;＆gt; Item 1＆lt; / option＆gt;   ＆lt; option style =＆＃34; background-image：url（/ _ assets / _img / thumbnail2.png）＆＃34;＆gt; Item 2＆lt; / option＆gt; ＆LT; /选择＆GT; 出于某种原因，这不会加载缩略图。我确保测试路径和缩略图确实存在（我在列表前做了一个＆lt; img src =＆＃34; / _ assets / _img / thumbnail1.png＆＃34;＆gt;以检查图像是否已加载。 任何想法如何实现这一目标？

Answer 1

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

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