在选择下拉菜单中包含图像

Including images in select dropdown

本文关键字：包含 图像 下拉菜单 选择      更新时间：2023-09-26

我想这个下拉选择在选项前面显示一个带有alt文本的图像，我怎么能做到这一点?

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

非常感谢!

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

那不是按钮!

你应该使用ddSlick，这是一个免费的轻量级jQuery插件，它允许你创建一个自定义的下拉菜单，包含图片和描述。

希望对大家有所帮助

DOM模型不允许img元素在选项元素中，所以你不能将图像放入select中。请查看一个HTML语言参考。但是您可以使用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的链接也是一个很好的例子。

相关文章：