在选择下拉列表中包括图像答案

【问题标题】：Including images in select dropdown在选择下拉列表中包括图像
【发布时间】：2013-06-05 05:13:36
【问题描述】：

我希望此下拉选择在选项前显示带有替代文本的图像，我该怎么做？

<form>
    <select onchange="window.open(this.options[this.selectedIndex].value,'_blank')">
        <option value="#">Select one</option>
        <option value="#"></option>
        <option value="http://www.url1.com">www.url1.com</option>
        <option value="http://www.url2.com">www.url2.com</option>
        <option value="www.url3.com">www.url3.com</option>
    </select>
</form>

非常感谢！

【问题讨论】：

标签： javascript forms select

【解决方案1】：

DOM 模型不允许 option 元素内的 img 元素，因此您不能将图像放入选择中。请查看an HTML language reference。但您可以使用 JavaScript 或 jQuery 在选择新选项时将图像放在菜单的左侧或右侧。

但是，在 Firefox 中，您只需将 背景图片 添加到选项：

<select>
    <option style="background-image:url(image1.png);">OPTION1</option>
    <option style="background-image:url(image2.png);">OPTION2</option>
    <option style="background-image:url(image3.png);">OPTION3</option>
</select>

而在其他浏览器中，这样做的唯一方法是使用一些 JS 小部件库，例如 jQuery UI Selectable。

olsn 的链接也是一个很好的例子。

【讨论】：

【解决方案2】：

这不是一个按钮！它是一个选择下拉菜单。

您应该使用ddSlick，这是一个免费的轻量级 jQuery 插件，可让您创建带有图像和描述的自定义下拉菜单。

希望对你有帮助

【讨论】：

【解决方案3】：

不可能在 html <select> 中显示图像 - 您必须使用像这样的自定义解决方案：http://ivaynberg.github.io/select2/

【讨论】：