在DDL中更改特定<option>的样式

时间:2016-06-30 19:46:43

标签: javascript html css

创建DDL的方法

int sorted_insert(Clist *list, char new_command){
    Cnode _head = {NULL, list->head}, *head = &_head, *prev = head, *tmp;//head is an auto dummy node obviating null checks.
    int ord = -1;//If there are no existing nodes, newObj would be less than all objects.
    while(prev->next && (ord = (int)newObj - prev->next->command)) > 0){//Iterate by prev->next not curr to use only one pointer.
        prev = prev->next;//Looping while there is a next node and its data compares less than new_command.
    }
    if((!ord) || !(tmp = malloc(sizeof(Cnode))){//newObj is already in the list or allocation failed.
        return 0;
    }
    *tmp = (Cnode){.next=prev->next, .command=new_command};
    prev->next = tmp;
    list->head = head->next;//un- add head which is then deallocated by stack frame cleanup.
    return 1;
}

CSHTML:

var groups = lstActivity.OrderBy(x => x.codeAC.Text).ThenBy(x => lstTraining.IndexOf(x.text)).ThenBy(x => x.text).GroupBy(x => x.codeAC.Text).OrderBy(g => lstCategories.IndexOf(g.Key));

foreach(var group in groups)
{
    var slg = new SelectListGroup() { Name = group.Key };

    foreach(codeAC activity in group)
    {
        SelectListItem item = new SelectListItem() { Text = activity.text, Value = activity.ID.ToString(), Group = slg };
        lstAssignments.Add(item);
    }
}

如何在HTML中呈现:

@Html.DropDownList("activityID", null, "-- Select Activity --", htmlAttributes: new { @id = "activityID", @class = "form-control" })

我的问题是..如何在页面加载时让<select name="activityID" class="form-control valid" id="activityID"> <option value="">-- Select Activity --</option> <optgroup label="Test Group 1"> <option value="7">TEST 1</option> <option value="6">TEST 2</option> <option value="5">TEST 3</option> <option value="4">TEST 4</option> <option value="2">TEST 5</option> <option value="1">TEST 6</option> <option value="10">TEST 7</option> <option value="9">TEST 8</option> <option value="8">TEST 9</option> </optgroup> <optgroup label="Test Group 2"> <option value="11">TEST 10</option> <option value="12">TEST 11</option> </optgroup> </select> 下的options显示为红色?

1 个答案:

答案 0 :(得分:1)

使用CSS属性选择器:optgroup[label="Test Group 2"]

&#13;
&#13;
optgroup[label="Test Group 2"] {
  color: red;
}
&#13;
<select name="activityID" class="form-control valid" id="activityID">
  <option value="">-- Select Activity --</option>
  <optgroup label="Test Group 1">
    <option value="7">TEST 1</option>
    <option value="6">TEST 2</option>
    <option value="5">TEST 3</option>
    <option value="4">TEST 4</option>
    <option value="2">TEST 5</option>
    <option value="1">TEST 6</option>
    <option value="10">TEST 7</option>
    <option value="9">TEST 8</option>
    <option value="8">TEST 9</option>
  </optgroup>
  <optgroup label="Test Group 2">
    <option value="11">TEST 10</option>
    <option value="12">TEST 11</option>
  </optgroup>
</select>
&#13;
&#13;
&#13;