如何将图像放置在下拉列表的选项中？答案

【问题标题】：How to place images in the options of a dropdown list?如何将图像放置在下拉列表的选项中？
【发布时间】：2021-12-14 07:23:32
【问题描述】：

我想显示一个包含城市和标志的下拉列表。像这样（对不起，用 Excel 制作的例子）...

我试过这个。但是这段代码不起作用。

<select id="address" class="form-control" placeholder="Address">
@foreach (var city in Model.City)
{
    <option value="@(city.Id)">@(city.Name) [<img src="~/images/'@(city.Country.CountryIsoCode3)'.png/" width="16" height="16">]</option>
}
</select>

有人可以帮我吗？

我使用 Bootstrap 看到带有“<select class="selectpicker">”的内容。我到底需要哪些 js、css 文件？我认为这可能是解决方案...

【问题讨论】：

我可以参考：stackoverflow.com/questions/4941004
怎么不工作。你能描述一下你的代码是如何失败的吗？另外，你的技术栈是什么？您拥有的代码不是纯 HTML，而是使用模板引擎。请说明您正在使用什么以及您当前的尝试是如何失败的。
如果您创建一个 sn-p 并将其添加到您的问题中，那也会很有帮助。
我使用数据模型。还有像 C#/Razor 这样的代码。
@user1531040 它是怎么失败的？你有错误吗？你在浏览器中看到了什么？ “不工作”是如此模糊，以至于很难理解确切的问题。这就是为什么要求您详细说明。

标签： html model-view-controller

【解决方案1】：

您可以考虑为此使用表情符号。

<select name="country">
  <option>GB ??</option>
  <option>FR ??</option>
  <option>DE ??</option>
</select>

https://jsfiddle.net/2mnzproa/

【讨论】：

感谢您的回答。但我在你的例子中看到没有图像。
确实，在某些较旧的操作系统和浏览器上，这将不起作用。你可以使用这个website 作为参考。在我看来，使用表情符号和文本是一种优雅的降级方式。大多数用户将获得最佳体验，而对于旧系统上的用户来说，它仍然可用。
已解决。使用引导程序（数据内容）。