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

时间:2009-12-14 15:02:57

标签: javascript jquery html css

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

2 个答案:

答案 0 :(得分:5)

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

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

答案 1 :(得分:2)

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

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