How can I add option groups in ASP.NET drop down list?

Question

I have a requirement of grouping the drop down list options in ASP.NET drop down server control. Do you have any idea to how to approach the issue? I am new to ASP.NET.

Answer 1

Here's what I did, with jquery-only, no server side changes:

/* Add Option Groups to Note Dropdown */
var $select = $('#<%= DropDownListIDHere.ClientID %>');
var optGroup;
$('#<%= DropDownListIDHere.ClientID %> option').each(function () {
    if ($(this).val() == '<') {
        /* Opener */
        optGroup = $('').attr('label', $(this).text());
    } else if ($(this).val() == '>') {
        /* Closer */
        $('').appendTo(optGroup);
        optGroup.appendTo($select);
        optGroup = null;
    } else {
        /* Normal Item */
        if (optGroup) {
            $('' + $(this).text() + '').attr('value', $(this).val()).appendTo(optGroup);
        } else {
            $('' + $(this).text() + '').attr('value', $(this).val()).appendTo($select);
        }
    }
    $(this).remove();
});

Then, you just add specific items as openers and closers with value < and > like so:

Super simple, no new controls needed, only targets the select you want to change, and doesn't require every item to be in an optgroup.