如何将 css class 动态添加到 DropDownList Razor 中的 Select 列表项

Question

嘿，我想在 MVC Razor 语法的 DropDowList 中的特定 SelectListIem 添加 CSS class。

我实际上想实现一个 CSS 用于：

new SelectListItem{ Text="Out Of 5", Value = "Out Of 5"},

而不是为整个控件实施。

下面是代码片段：

@Html.DropDownList("Options", new List<SelectListItem>
{
   new SelectListItem{ Text="Select Options", Value = "1" },
   new SelectListItem{ Text="CheckBox", Value = "1" },
   new SelectListItem{ Text="Radio", Value = "2" },
   new SelectListItem{ Text="Rating", Value = "3"},
   new SelectListItem{ Text="Out Of 5", Value = "Out Of 5"},
   new SelectListItem{ Text="Out Of 10", Value = "Out Of 10"},
   new SelectListItem{ Text="Text", Value = "4"},
}, new { @class = "form-control input-group, dropdown-submenu" })

Answer 1

这里有两个解决方案：

第一个（foreach options of dropdown,and if text="Out Of 5",add class to it):

@Html.DropDownList("Options", new List<SelectListItem>
{
   new SelectListItem{ Text="Select Options", Value = "1" },
   new SelectListItem{ Text="CheckBox", Value = "1" },
   new SelectListItem{ Text="Radio", Value = "2" },
   new SelectListItem{ Text="Rating", Value = "3"},
   new SelectListItem{ Text="Out Of 5", Value = "Out Of 5"},
   new SelectListItem{ Text="Out Of 10", Value = "Out Of 10"},
   new SelectListItem{ Text="Text", Value = "4"},
}, new { @class = "form-control input-group, dropdown-submenu",@id="select" })
<script>
    $(function () {
        $("#select > option").each(function () {
            if (this.text == "Out Of 5") {
                $(this).addClass("special");
            }
        });
    })
</script>
<style>
    .special {
        color:red;
    }
</style>

2.Second 一个（把selectlistItem改成，<option value="Out Of 5" class="special">Out Of 5</option>加上class）：

<select class="form-control input-group, dropdown-submenu">
    <option value="1">Select Options</option>
    <option value="1">CheckBox</option>
    <option value="2">Radio</option>
    <option value="3">Rating</option>
    <option value="Out Of 5" class="special">Out Of 5</option>
    <option value="Out Of 10">Out Of 10</option>
    <option value="4">Text</option>
<style>
    .special {
        color:red;
    }
</style>

结果：

如何将 css class 动态添加到 DropDownList Razor 中的 Select 列表项

How to add css class dyanmically to Select List Item in DropDownList Razor

css

model-view-controller

razor

asp.net-core