javascript asp.net：更改列表框项目的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7506762/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
asp.net: change color of listbox items
提问by l--''''''---------''''''''''''
a listbox on a webform is being populated by a datasource on a sql server 2008.
sql server 2008 上的数据源正在填充 webform 上的列表框。
depending on the text in the list box i would liek the backgroudn color of that specific item to be a specific color
根据列表框中的文本，我会将特定项目的背景颜色设为特定颜色
for example if these are the items in the list:
例如，如果这些是列表中的项目：
AA item 1
AA item 2
BB item 3
BB item 4
AA item 5
if the item begins with AA, then make the background greenand if the item beings with BBthen make it blue
如果项目以 开头AA，则制作背景green，如果项目存在，BB则制作blue
how can i do this?
我怎样才能做到这一点？
the solution can be client or server side, doesnt matter to me
解决方案可以是客户端或服务器端，对我来说无关紧要
i am currenlty doing this:
我目前正在这样做：
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";
}
}
}
and it's working great!!
而且效果很好！！
however i have the following complication.
但是我有以下并发症。
the first column as you see below:
如下所示的第一列：
AA item 1
AA item 2
BB item 3
BB item 4
AA item 5
will not be visible
将不可见
only the second one will be visible:
只有第二个可见：
Item 1
Item 2
...
this column :
本专栏：
AA
AA
..
..
is a field in the database table from which this data is pulled and i need the color to be based on that field.
是数据库表中的一个字段，从中提取此数据，我需要基于该字段的颜色。
how can i do this?>
我该怎么做？>
回答by Icarus
Server-side approach:
服务器端方法：
<asp:ListBox ID="prevSubList" runat="server" Height="16px" DataTextField="Key"
DataValueField="Value" Width="263px" Rows="1"
OnDataBound="prevSubList_DataBound">
</asp:ListBox>
And the DataBound Event is handled as follows:
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;");
}
}
回答by Plymouth223
Something like:
就像是：
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 '
}
}
Based on the removal of the AA, BB flags from the html, modifying the color on the client will no longer be possible.
基于从 html 中删除 AA、BB 标志，将不再可能在客户端上修改颜色。
回答by Felan
Since the data that controls the color is not part of the listitem you will have to manually add the items and color them before adding them.
由于控制颜色的数据不是 listitem 的一部分，因此您必须在添加项目之前手动添加项目并为它们着色。
ASPX page:
ASPX 页面：
<asp:ListBox ID="testListBox" runat="server"
onload="TestListBoxOnLoad">
</asp:ListBox>
Code-behind (I just used an array of strings and their length to test it out, your logic will be different):
代码隐藏（我只是使用了一个字符串数组及其长度来测试它，你的逻辑会有所不同）：
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);
}
}
回答by L. S. S.
I don't know if this is against the rule of the asp .net mvc but what I did to solve a similar problem was not to use the @Html.ListBoxFor.
我不知道这是否违反了 asp .net mvc 的规则，但我为解决类似问题所做的不是使用@Html.ListBoxFor.
I check what the @Html.ListBoxForadd to the html and did the validations manually.
我检查@Html.ListBoxFor添加到 html 的内容并手动进行验证。
I guess if I change the name of the List (in the model) I'll have to return to my code and modify it manually too (less scalable and maintainable code)
我想如果我更改列表的名称（在模型中），我将不得不返回到我的代码并手动修改它（可扩展性和可维护性较差的代码）
this is my case:
这是我的情况：
<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>
