3

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

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

非常感谢！

4

3 回答 3

0

DOM模型不允许选项元素中的img元素，因此您不能将图像放入选择中。请查看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 的链接也是一个很好的例子。

于 2013-06-09T11:26:58.970 回答
0

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

于 2013-06-09T11:15:09.697 回答
0

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

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

我希望这有帮助

于 2013-06-09T11:16:35.173 回答