设置不同的颜色在ASP：DropDownList的项目 [英] set Different colors in asp:DropDownList Items

问题描述

我有一个在我的形式，用4个不同的选项（项）
我需要做的是设置从客户端不同的颜色，没有回发。

I have an in my form, with 4 different options (items) What I need to do it's to set a different color from client side, without PostBack.

• 选择......（白色）


• 完成（绿色）


• 运行（黄色）


• 等待在SEV1（红色）

有人能帮助我？

<asp:DropDownList ID="DropDownList1" runat="server">
                    <asp:ListItem>Select...</asp:ListItem>
                    <asp:ListItem>Complete</asp:ListItem>
                    <asp:ListItem>Running</asp:ListItem>
                    <asp:ListItem>Waiting in SEV 1</asp:ListItem>
                    <asp:ListItem>No Batch</asp:ListItem>
                </asp:DropDownList>

我只找了一个解决方案，但没有成功呢。这就是为什么我还没有尝试过任何事情。

I have only looked for a solution for this, with no success yet. That's why I haven't tried anything yet.

推荐答案

此标记适用于不同的背景颜色为每个项目，并设置的onchange 事件处理程序：

This markup applies a different background color to each item, and sets the onchange event handler:

<asp:DropDownList ID="DropDownList1" runat="server" onchange="SetDropDownListColor(this);">
    <asp:ListItem style="background-color: White !important;" >Select...</asp:ListItem>
    <asp:ListItem style="background-color: Green !important;" >Complete</asp:ListItem>
    <asp:ListItem style="background-color: Yellow !important;" >Running</asp:ListItem>
    <asp:ListItem style="background-color: Red !important;" >Waiting in SEV 1</asp:ListItem>
    <asp:ListItem style="background-color: Blue !important;" >No Batch</asp:ListItem>
</asp:DropDownList>

下面的JavaScript确保选择框的颜色所选项目的颜色相匹配：

The following Javascript ensures that the color of the selection box matches the color of the selected item:

function SetDropDownListColor(ddl) {
    for (var i = 0; i < ddl.options.length; i++) {
        if (ddl.options[i].selected) {
            switch (i) {
                case 0:
                    ddl.style.backgroundColor = 'White';
                    return;

                case 1:
                    ddl.style.backgroundColor = 'Green';
                    return;

                case 2:
                    ddl.style.backgroundColor = 'Yellow';
                    return;

                case 3:
                    ddl.style.backgroundColor = 'Red';
                    return;

                case 4:
                    ddl.style.backgroundColor = 'Blue';
                    return;
            }
        }
    }
}

的！重要修改设置在列表中的项目的标记，以覆盖背景色设置为Javascript函数整个控制。

The !important modifier is set in the markup of the items in the list, in order to override the background color set to the whole control in the Javascript function.

在为preserve将DropDownList的回传后的颜色，code的以下行可以加给Javascript块。它定义了页面的负载事件，其中，所述选择的项目的颜色被施加到选择框的处理程序：

In order to preserve the color of the DropDownList after a postback, the following line of code can be added to the Javascript block. It defines a handler for the load event of the page, in which the color of the selected item is applied to the selection box:

window.addEventListener('load', function () { SetDropDownListColor(document.getElementById('<%= DropDownList1.ClientID %>')); }, false);

这篇关于设置不同的颜色在ASP：DropDownList的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！