Using JQuery to enable optgroup in CForms

CForms II is an extremely robust and useful plugin for WordPress. One of the main frustrations I’ve noticed people have with it is the lack of optgroup support with select boxes. I wrote this little piece of JQuery code that will allow you to enable optgroup:

if($(".cform").length!=0){
  $(".cform select option").each(function(){
    if($(this).val() == "groupstart"){
      var label = $(this).text();
      $(this).nextUntil('option[value|="groupend"]')
        .wrapAll("<optgroup label='"+label+"' />");
      $(this).detach();
    }
  });
  $('option[value|="groupend"]').detach();
}

Once you have that code in place, all you need to do is add groupstart and groupend codes to your cforms settings for your select box. For the groupstart you will add it as though it were just another option, with the label being the label you want for your group, and the value being the literal string “groupstart.” For the groupend, it doesn’t matter what the label is, as long as the value is “groupend.” It’s easiest just to use groupend as the label, and leaving the value empty so that CForms will automatically use the label as the value.

Here’s an example of how to form your CForms settings in conjunction with the JQuery code above:

Color#Choose|#Warm Colors|groupstart#red#orange#yellow#groupend#Cool Colors|groupstart#blue#green#purple#groupend#brown#black#white

Which will result in the following:

Let me know if this works as well for you as it did for me.