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.
2 Answers
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=""/>');
Comments
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:
Dropdownlist control with <optgroup>s for asp.net (webforms)?
