Twiiter Bootstrap - form dropdown dividers and headings

Question

Using Twitter Boostrap, I'm trying to create a form dropdown with dividers within the dropdown, corresponding to each section. Is that possible?

JSFiddle included

I'd like to create something like:

<!--GROUP-->
<option>1</option>
<option>2</option>
<option>3</option>
<!--GROUP-->
<option>4</option>
<option>5</option>
<option>6</option>

Tried it, but without the indentation, which is the reason it did not work for me. I'll accept your answer, but it may be worthwhile noting for future readers that indentation matters. — snakesNbronies, Dec 04 '12 at 09:06
Related post as an extension of this question for those using backbone.js: http://stackoverflow.com/questions/13717366/backbone-marionette-passing-variable-to-composite-view-tag — snakesNbronies, Dec 05 '12 at 06:55

score 9 · Accepted Answer · answered Dec 04 '12 at 09:04

To achieve this, you could use optgroup

<div class="container">
    <select>
        <optgroup label="Group 1">
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
        </optgroup>
        <optgroup label="Group 2">
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
        </optgroup>
    </select>
</diV>

Updated fiddle: http://jsfiddle.net/codovations/M8pSH/

Twiiter Bootstrap - form dropdown dividers and headings

1 Answers1