Adding line to ASP.NET to ListBox

Question

I need a line added to a listbox in ASP.NET to provide some separation from the many options the user can choose from. Currently, we have over 20 different options for the user to choose and I need to put the most popular up top. I have the logic that puts the popular option on top, but think a line in the listbox will help the user separate them from the rest of the list. The listbox items are populated in the code behind.

Answer 1

You can use the optgroup tag to give separation.

<select>
   <option value="XX"/>
   <optgroup label="separation"/>
   <option value="BB"/>
</select>

To give only a line you will need to do some trickery. See below

<style type="text/css">
    optgroup {border-bottom:solid thin black; width:100%;}
</style>
<select>
   <option value="XX"/>
   <optgroup label=" "/>
   <option value="BB"/>
</select>

If your data is already loaded you could run some jquery after.

$('select option[value="XX"]').after('<optgroup label=""/>');

Answer 2

There is no out-of-the box possibility to create option-groups from DropDownLists nor Listboxes in asp.net.

Found those articles providing a server-side and client-side solution to achieve what you are looking for:

Optgroup in .NET Listbox

Dropdownlist control with <optgroup>s for asp.net (webforms)?