如何为Razor下拉菜单的选项列表设置交替颜色

方法一：纯CSS实现（推荐） #

无需修改后端代码，利用CSS的:nth-child()选择器即可快速实现交替背景色：

/* 偶数位置的option设置浅灰背景 */
select.form-control option:nth-child(even) {
    background-color: #f0f0f0;
}

/* 奇数位置的option设置白色背景 */
select.form-control option:nth-child(odd) {
    background-color: #ffffff;
}

这种方式兼容性好，无需改动业务代码，维护成本低。

方法二：后端循环生成Option（自定义场景） #

如果需要根据数据的特定属性来控制颜色（而非单纯奇偶位置），可以手动循环生成option标签：

<select asp-for="AssetCode" class="form-control">
    @foreach (var item in Model.AssetList)
    {
        var bgColor = Model.AssetList.IndexOf(item) % 2 == 0 ? "#ffffff" : "#f0f0f0";
        <option value="@item.Value" style="background-color:@bgColor">@item.Text</option>
    }
</select>

注：如果AssetList是SelectList类型，直接使用SelectListItem的Value和Text属性即可；若为自定义集合，替换为对应字段名即可。

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