Optgroup in .NET Listbox

I have a need to grou开发者_如何学Gop items in the Listbox similar to the OPTGROUP in a html SELECT.

Any suggestions is greatly appreciated.

Refactored Sandeep's answer:

http://jsfiddle.net/kgBr9/

HTML

<select id="mySelect">
    <option optGroup='a'>1</option>
    <option optGroup='a'>1</option>
    <option optGroup='a'>1</option>
    <option optGroup='b'>2</option>
    <option optGroup='b'>2</option>
</select>

JQuery

function SetupOptGroups(select) {
    var optGroups=new Array();    
    var i = 0;

    $(select).find("[optGroup]").each(function(index, domEle) {
        var optGroup = $(this).attr("optGroup");
        if ($.inArray(optGroup, optGroups)==-1) optGroups[i++] = optGroup;
    });

    for(i=0; i < optGroups.length; i++){
        $("option[optGroup='"+optGroups[i]+"']").wrapAll("<optgroup label='"+optGroups[i]+"'>");
    }
}

I accomplished this requirement by adding an attribute to options and attribute value will be the Optgroup name i want to have. And in the client side i used this code to render dropdown with optgroupsvar optGroup = "";

var i = 0;
$(this).find("option").each(function () {
    if (optGroup !== "")
        optGroup += "," + $(this).attr("OptGroup");
    else
        optGroup = $(this).attr("OptGroup");
});
var optGroups = $.unique(optGroup.split(","));
for (var optGroupEle in optGroups) {
    if ($("optgroup[label='" + optGroups[optGroupEle] + "']").html() == null)
        $("option[OptGroup='" + optGroups[optGroupEle] + "']").wrapAll("<optgroup label='" + optGroups[optGroupEle] + "'/>");
}

You can add an Item and disable, change the color, the final efect is the same, i.e.

itemVersion.Attributes.Add("disabled", "true") itemVersion.Attributes.Add("style", "color:#CCCCCC") ddlAspectoOrigen.Items.Add(itemVersion)

You can use the HTML SELECT control and access all properties of this from the codebehind like a listbox. You only need to add the label runat="server".