Combine two IEnumerables into one dropdownlist, divided into sections

Question

I've got a drop down list, populated with an IEnumerable. I want to add another IEnumerable to the same drop down list, under a different section with a header.

The divided drop down list is available in bootstrap, but I'm not sure how to implement it using html.dropdownlistfor(). I use a "GetList()" function to return an IEnumerable. I would use a similar command to get the second IEnumerable for the second section in the same drop down.

My current code is below:

<div>
        @Html.DropDownListFor(model => model.default,
        new SelectList(GetList(), "ID", "Description"),
        "Select an item",
        new { @class = "form-control" })
</div>

The `DropDownListFor()` method does not support grouping (the `` tag). You need MVC-5.2+ or create you own extension method (refer examples in [this answer](http://stackoverflow.com/questions/607188/support-for-optgroup-in-dropdownlist-net-mvc)) — , Jan 26 '16 at 22:27

score 0 · Accepted Answer · answered Feb 12 '16 at 20:11

I ended up using optgroups, and it worked out nicely.

 <select name="JsonValue" id="JsonValue" class="form-control">
                <optgroup label="Service Items">
                    @foreach (var item in (SelectList)ViewBag.Items)
                    {
                        <option value="@item.Value">@item.Text</option>
                    }
                </optgroup>
                <optgroup label="Split">
                    @foreach (var item in (SelectList)ViewBag.items)
                    {
                        <option value="@item.Value">@item.Text</option>
                    }
                </optgroup>
 </select>

Combine two IEnumerables into one dropdownlist, divided into sections

1 Answers1