Twiiter Bootstrap - Form Separators and Headers

Using Twitter Boostrap, I am trying to create a drop-down list of forms with separators in the drop-down list corresponding to each section. Is it possible?

JSFiddle enabled

I would 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> 
+6
source share
1 answer

To achieve this, you can 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 script: http://jsfiddle.net/codovations/M8pSH/

+8
source

All Articles