如何在 webforms 中的选择中用自定义 HTML 替换 ListItem

Question

I'm using WebForms in an application where my code behind generates an HtmlSelect:

HtmlSelect teamfilter = new HtmlSelect();
teamfilter.ID = "team_filter_" + studioId;
teamfilter.Attributes.Add("class", "col-md-9");
teamfilter.Attributes.Add("multiple", "true");

ListItem listItem = new ListItem("All " + studioName, "studio_" + studioId);
listItem.Attributes.Add("data-type", "studio");
teamfilter.Items.Add(listItem);

On the client side I'm using a plugin which allows ListItems to be grouped with a header in the list using a tag. In other words the rendered HTML must appear as:

<select id="blah">
    <optgroup label="Games">
        <option value="1">One</option>
        <option value="2">Two</option>
    </optgroup>
</select>

I need to generate this Select in the code behind using the HtmlSelect class and the ListItem class but how do I add an item so that it renders the starting and closing optgroup tags?

Answer 1

I think you can't do it only in code behind.

Keep the code behind generating the HtmlSelect this way you're doing, and with jQuery, maybe you can do something like this:

$("select[id='blah'] option").wrap("<optgroup label='Games'></<optgroup>");