// 1. Turn on the "Show Values" option in a Gravity Forms select field
// 2. To start an optgroup, enter the label as you would like it
// to appear on the site, then in the value field enter 'start'
// 3. To end the optgroup, enter 'end' in the value field
// 4. Include the jQuery script below
jQuery(document).ready(function(){
//Use the class you used for the drop down here, I used ‘custom-opt’
jQuery('.custom-opt select option').each(function() {
//look for 'start', start a new optgroup with the label
if(jQuery(this).val()=='start') {
var label = jQuery(this).text();
jQuery(this).replaceWith("<optgroup label='"+label+"'>");
}
//look for 'end' end the optgroup here
if(jQuery(this).val()=='end') {
jQuery(this).replaceWith('</optgroup>');
}
});
});