jQuery Optgrouper Demo

Add data-optgroup attribute to each <option> element.

<select id="selAnimals">
    <option data-optgroup="Mammals">Cheetah</option>
    <option data-optgroup="Reptiles">Lizard</option>
    <option data-optgroup="Reptiles">Snake</option>
    <option data-optgroup="Mammals">Elephant</option>
</select>

Include jquery.js and jquery.optgrouper.js, then call Optgrouper when page is ready.

<script src="jquery.js"></script>
<script src="jquery.optgrouper.js"></script>
<script>
$(document).ready(function() {
    $('#selAnimals').optgrouper();
});
</script>

The <select> list below has been modified using the jQuery Optgrouper plugin.

Cheetah Lizard Snake Elephant