更改列表框项的颜色

本文关键字：颜色 列表 | 更新日期: 2023-09-27 18:09:30

web表单上的一个列表框正在被SQL server 2008上的数据源填充。

根据列表框中的文本，我希望该特定项目的背景颜色为特定颜色

例如，如果这些是列表中的项目:

AA item 1
AA item 2
BB item 3
BB item 4
AA item 5

如果项目以AA开头，则将背景设置为green，如果项目以BB开头，则将背景设置为blue

我该怎么做?

解决方案可以是客户端或服务器端，对我来说无关紧要

我现在正在做这个:

function colorproblemlist() {
        ob = document.getElementById('lstProblems');
        for (var i = 0; i < ob.options.length; i++) {
            if (ob.options[i].value.indexOf('AA')!=-1) {
                ob.options[i].style.color = "red";
            }
        }
    }

，它工作得很好!!

然而，我有以下并发症。

第一列，如下所示:

AA item 1
AA item 2
BB item 3
BB item 4
AA item 5

将不可见

只有第二个是可见的:

Item 1
Item 2
...

this column:

AA
AA

.

是数据库表中的一个字段，从中提取数据，我需要基于该字段的颜色。

我该怎么做?>

更改列表框项的颜色

服务器端方法:

<asp:ListBox ID="prevSubList" runat="server" Height="16px" DataTextField="Key" 
 DataValueField="Value" Width="263px" Rows="1"  
 OnDataBound="prevSubList_DataBound">
</asp:ListBox>

和DataBound事件处理如下:

protected void prevSubList_DataBound(object sender, EventArgs e)
{
     foreach (ListItem item in prevSubList.Items)
     {
         if (item.Text.Contains("AA"))
            item.Attributes.Add("style","background-color:green;");
         else if(item.Text.Contains("BB"))
            item.Attributes.Add("style", "background-color:blue;");
     }
}

类似于

function colorproblemlist() {
    ob = document.getElementById('lstProblems');
    for (var i = 0; i < ob.options.length; i++) {
        var option = ob.options[i];
         switch(option.value.substr(0,2))
         {
            case "AA":
                option.style.color = "Red";
            break;
            case "BB":
                option.style.color = "Green";
            break;
         }
         option.value = option.value.slice(3); //Assumption of 'AA '
    }
}

基于从html中移除AA, BB标志，修改客户端上的颜色将不再是可能的

由于控制颜色的数据不是列表的一部分，因此您必须在添加项之前手动添加项并为其上色。

ASPX页面:

<asp:ListBox ID="testListBox" runat="server" 
    onload="TestListBoxOnLoad">
</asp:ListBox>

后台代码(我只是使用了一个字符串数组和它们的长度来测试，你的逻辑将会不同):

private string[] testData = new string[] { "Alpha", "Beta", "Gamma", "Delta", "Eta", "Theta", "Zeta", "Iota" };
protected void TestListBoxOnLoad(object sender, EventArgs e)
{
    foreach (var data in testData)
    {
        ListItem item = new ListItem()
        {
            Text = data
        };
        if (data.Length < 5)
        {
            item.Attributes.Add("class", "aaStyle");
        }
        else
        {
            item.Attributes.Add("class", "bbStyle");
        }
        testListBox.Items.Add(item);
    }
}

我不知道这是否违反了asp.net mvc的规则，但我所做的解决类似的问题是不使用@Html.ListBoxFor。

我检查@Html.ListBoxFor添加到html中并手动进行验证。

我想如果我改变列表的名称(在模型中)，我将不得不返回到我的代码并手动修改它(不太可扩展和可维护的代码)

这是我的情况:

<label for="EventsList" style="font-size:.9em" >Evento</label>                  
<select id="EventsList" multiple="multiple" name="Eventos">
    @foreach (var evento in Model.Eventos)
    {
        string style = "";
        switch (evento.Estado)
        {
            case 0:
                style = "background-color:#ff6868";
                break;
            case 1:
                style = "background-color:#ff8355";
                break;
            case 2:
                style = "background-color:#fcfc6a";
                break;
            case 3:
                style = "background-color:#79d779";
                break;
        }
        <option value="@evento.Id" style="@style">@evento.Descripcion</option>
    }
</select>
相关文章：