Grouping of select box options through javascript

Your select box 

<select>
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
<option value="ddd">ddd</option>
<option value="eee">eee</option>
<option value="fff">fff</option>
</select>
<script type="text/javascript">
$(function () {
    var $cont = $('select');
   
    $('select option').each(function () {
        if ($(this).text().indexOf('aaa') === 0 || $(this).text().indexOf('ddd') === 0) {
            $('<optGroup/>').attr('label', $(this).text()).appendTo($cont);
            $(this).remove();
        } else {
            $cont.find('optGroup').last().append($(this));
            $(this).text($(this).text());
        }
    });
    });

</script>
Share on Google+Share on FacebookTweet about this on TwitterEmail this to someone