如何在 selectListItem 上添加背景色

发布于 2024-09-17 09:08:49 字数 664 浏览 2 评论 0原文

我有一个 asp.net mvc 页面,我想要一个具有不同背景颜色的下拉列表 喜欢此页面

我有以下代码来

<label>Data Source: </label><% = Html.DropDownList("DataSource", Model.CalendarDataSources, new { @id = "calendarDSDropdown", @class = "calendarDSDropdown" })%>

在我的视图模型中

    public IEnumerable<SelectListItem> CalendarDataSources;

显示下拉 列表:我正在服务器上填充。我想向每个 SelectListItem 添加不同的待办事项,但我不知道如何执行此操作,因为选择列表项只有 Name、Id、Selected 属性,

这可能吗

i have an asp.net mvc page and i want to have a dropdown list with different background color like this page

i have the following code to display a dropdown list

<label>Data Source: </label><% = Html.DropDownList("DataSource", Model.CalendarDataSources, new { @id = "calendarDSDropdown", @class = "calendarDSDropdown" })%>

in my viewmodel i have:

    public IEnumerable<SelectListItem> CalendarDataSources;

which i am populating on the server. I want to add a different backlog to each SelectListItem but i can't see how to do that as select list item only has Name, Id, Selected properties

is this possible

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

腹黑女流氓 2024-09-24 09:08:49

不幸的是,内置的 DropDownList 帮助器不允许您在生成的 option 标记上设置 style 属性。您将必须推出自己的助手才能实现这一目标。

作为替代方案,您可以使用 jQuery 来设置颜色:

$(function() {
    $('select#DataSource option').each(function() {
        var option = $(this);
        option.css(
            'background-color', 
            someFunctionThatMapsTheOptionValueToAColor(option.val())
        );
    });
});

Unfortunately the built-in DropDownList helper doesn't allow you to set the style attribute on the generated option tags. You will have to roll your own helper to achieve this.

As an alternative you could use jQuery to set the color:

$(function() {
    $('select#DataSource option').each(function() {
        var option = $(this);
        option.css(
            'background-color', 
            someFunctionThatMapsTheOptionValueToAColor(option.val())
        );
    });
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文