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=""/>');