Drop down (combo box) with multiple headers

Question

Are there any widgets or code available that use HTML/CSS/JQuery to create a drop down box (HTML select tag) that can have multiple headers? The headers shouldn't be selectable. For example see the "Apples" drop down box in this image:

It's very difficult to find stuff like this unfortunately. I feel like I'm redesigning stuff that has been done before, but I can't find it anywhere. Anyway, if nobody can find it I'll create it myself. Any ideas on how to go about creating it are welcome, but I'm sure it will involve divs, Jquery to show/hide, and CSS for borders/items.

Answer 1

I think you are looking for optgroup tag in select see the example here

http://www.w3schools.com/tags/tag_optgroup.asp

A little fiddle here

http://jsfiddle.net/sushilbharwani/Xp8YK/

<select name="catsndogs">
    <optgroup label="Cats">
        <option>Tiger</option>
        <option>Leopard</option>
        <option>Lynx</option>
    </optgroup>
    <optgroup label="Dogs">
        <option>Grey Wolf</option>
        <option>Red Fox</option>
        <option>Fennec</option>
    </optgroup>
</select>