Question

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

<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>

非常感谢！

Answer 1

无法在html <select>中显示图片 - 您必须使用类似这样的自定义解决方案：http://ivaynberg.github.io/select2/

Answer 2

这不是按钮！，它是一个选择下拉列表。

你应该使用ddSlick这是一个免费的轻量级jQuery插件，允许你创建一个带有图像和描述的自定义下拉列表。

我希望这会有所帮助

Answer 3

DOM 模型不允许选项元素中的 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的链接也是一个很好的例子。

在选择下拉列表中包含图像

3 个答案: