Jquery 如何从multiselect（selectList）创建optGroup？

问：如何在给定的范围内创建optGroups，请执行以下操作：

模型（伪）：

控制器：

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

视图：

@Html.ListBox（“区域列表”，空）
$（“#AreaId”）.multiselect({
selectedText:“Selected:#”，
最小宽度：210，
未选择的文本：“”，
选择列表：1
});

生成的HTML（示例）：

选择1
选择2
选择3
选择3

@foreach（Model.AreaList.select（new{group:GroupID}）.Distinct（）中的var组）
{
@团体
@foreach（Model.AreaList.Where（r=>r.GroupID==group）中的var项）
{
@名字
}
}

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

@Html.ListBox("AreaList", null) 

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

<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>

<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>
    }
}