如何在下拉列表的option选项中添加图片？实现带城市与对应国旗的下拉框

原生HTML的<option>元素不支持嵌套图片等自定义HTML标签，你直接在<option>内编写<img>标签的写法无法被浏览器正常渲染，使用Bootstrap Select（selectpicker）确实可以实现你要的带国旗下拉效果，具体实现如下：

1. 引入依赖资源 #

按以下先后顺序引入对应静态资源即可：

• jQuery核心JS文件（推荐v3.0及以上版本）
• Bootstrap核心CSS文件
• Bootstrap核心JS文件
• Bootstrap Select组件的CSS文件
• Bootstrap Select组件的JS文件

2. 修改前端代码 #

通过selectpicker支持的data-content属性自定义选项的渲染内容，修改后的代码如下：

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

注意：你原有代码的图片路径多了多余的单引号和结尾斜杠，上述代码已经修正了该问题，确保你的国旗图片命名和CountryIsoCode3字段值完全匹配，且存放在~/images/目录下。

3. 初始化组件 #

页面加载完成后执行初始化代码即可渲染出对应效果：

$(function(){
    $('.selectpicker').selectpicker();
})

内容的提问来源于stack exchange，提问作者user1531040