07-23-2023, 02:24 AM
I really liked @ScottRFrost's answer above. But, it fell two bricks short of my load as of this writing:
1. It did not persist the groupings across postbacks inside my UpdatePanel and
2. It did not persist the drop down selected value across postbacks.
Here is my extensions to the client side of his answer:
$(document).ready(function () {
ddlOptionGrouping();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(ddlOptionGrouping);
function ddlOptionGrouping() {
/* Add Option Groups to asp:DropdownList */
var $select = $('#<%= aspDropDownList.ClientID %>');
var optGroup;
$('#<%= aspDropDownList.ClientID %> option').each(function () {
if ($(this).val() == '<') {
/* Opener */
optGroup = $('<optGroup>').attr('label', $(this).text());
} else if ($(this).val() == '>') {
/* Closer */
$('</optGroup>').appendTo(optGroup);
optGroup.appendTo($select);
optGroup = null;
} else {
/* Normal Item */
let $option = $('<option>' + $(this).text() + '</option>').attr('value', $(this).val());
if (this.hasAttribute('selected')) {
$option.attr('selected', $(this).attr('selected'));
}
if (optGroup) {
$option.appendTo(optGroup);
} else {
$option.appendTo($select);
}
}
$(this).remove();
});
}
});
1. It did not persist the groupings across postbacks inside my UpdatePanel and
2. It did not persist the drop down selected value across postbacks.
Here is my extensions to the client side of his answer:
$(document).ready(function () {
ddlOptionGrouping();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(ddlOptionGrouping);
function ddlOptionGrouping() {
/* Add Option Groups to asp:DropdownList */
var $select = $('#<%= aspDropDownList.ClientID %>');
var optGroup;
$('#<%= aspDropDownList.ClientID %> option').each(function () {
if ($(this).val() == '<') {
/* Opener */
optGroup = $('<optGroup>').attr('label', $(this).text());
} else if ($(this).val() == '>') {
/* Closer */
$('</optGroup>').appendTo(optGroup);
optGroup.appendTo($select);
optGroup = null;
} else {
/* Normal Item */
let $option = $('<option>' + $(this).text() + '</option>').attr('value', $(this).val());
if (this.hasAttribute('selected')) {
$option.attr('selected', $(this).attr('selected'));
}
if (optGroup) {
$option.appendTo(optGroup);
} else {
$option.appendTo($select);
}
}
$(this).remove();
});
}
});