Question

Q: How can I create optGroups within a multiselect given the following:

Model (pseudo):

class Area {
  string Name;
  string Id;
  string GroupId;   // Want to group by this and display opt groups with my multiselect.
}

Controller:

ViewBag.AreaList = new SelectList(db.Areas.OrderBy(x => x.Name), "AreaId", "Name");

View:

@Html.ListBox("AreaList", null) 

<script type="text/javascript">
$("#AreaId").multiselect({
    selectedText: "Selected: #",
    minWidth: 210,
    noneSelectedText: "",
    selectedList: 1
});
</script>

Resulting HTML (example):

<select>
  <optgroup label="Group 1">
    <option value ="1">Option 1</option>
    <option value ="2">Option 2</option>
  </optgroup>
    <optgroup label="Group 2">
    <option value ="3">Option 3</option>
    <option value ="4">Option 3</option>
  </optgroup>
</select>

Answer 1

<select>
@foreach (var group in Model.AreaList.select(new {group:GroupID}).Distinct())
{
    <optgroup>@group</optgroup>
    @foreach(var item in Model.AreaList.Where(r=>r.GroupID == group))
    {
         <option value="@id">@Name</option>
    }
}