如何在选择选项文本之前放置图像/图标？

Question

希望在HTML选择框中的项目/选项前放置不同的图标。

Answer 1

理论上，您可以使用background-image元素中的CSS <option>属性，但这在（ cough ）IE中无法正常工作。

最好的办法是使用jQuery / Javascript来模拟一堆<li>或<div>元素的下拉列表。到目前为止还没有人想到（我从来没有需要这样的下拉菜单），但你可以找到here概述“更好”的jQuery下拉插件，必须有一个适合你的需求，例如this one。

Answer 2

唯一的方法是使用DHTML下拉列表动态替换select，而vanilla控件没有该功能。使用DHTML下拉列表的好处是，对于那些禁用了javascript的用户，它应该会优雅地降级。

您可以使用jQuery完成它，使用正常的＆lt; select＆gt;，抓住它并替换为隐藏字段，将您喜欢的DHTML下拉列表与图像（隐藏定位＆lt; div＆gt;带有无序列表）可以执行此操作），附加到项目的onclick事件，并使用所选值更新隐藏字段。