下拉菜单选项是图像(不是文本)

Question

我想问关于html下拉菜单的问题。如我们所知，html中的选项标签只支持文本。然而，我需要创建一个显示图像列表的下拉菜单。我已经找过了。我找到了几种方法，包括使用css或jquery。然而，这不是我想要的。下面是我想要创建的内容：

<option value = blablabla><img src = "img/blbalba.txt"></option>

上面的代码不起作用。有没有像那样显示下拉菜单的建议？

谢谢你的帮助。

Answer 1

检查以下内容:)

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

这个插件有什么好酷的！

• 将图像和描述添加到其他乏味的下拉列表中。
• 允许JSON填充下拉列表，将您的HTML元素添加到ddSlick。
• 使用最少的css，并且没有外部样式表，即使没有图像或description!

，在JSON上的回调函数也一样好

Answer 2

因为你不能用普通的超文本标记语言做到这一点，但是你可以用JQuery做到这一点。

现在你可以这样做

<select>
<option value="img1" style="background-image:url(images/img1.png);">image 1</option>
<option value="img2"  style="background-image:url(images/img2.png);">image 2</option>
<option value="img3" style="background-image:url(images/img3.png);">image 3</option>
<option value="img4"  style="background-image:url(images/img4.png);">image 4 </option>
</select>

Answer 3

浏览器只会在select标签中呈现文本，因此，如果您想使用显示图像而不是文本的选择器，则不能使用select，您将需要构建自己的可选择对象。

这可能很难做到。您可以使用与您的情况相同的人以前开发的不同预制解决方案，也可以尝试重新发明轮子。