ParkMart

I also searched without finding a solution, but was able to get it mostly working using jquery. There is something strange in the way jquery is auto closing the tag. I’ll post an update if I get it fully working.

First I created a drop down list in CF7. For each item that I wanted to be an optgroup item, i gave it a prefix of optgroup-.

For example my list looks like:

optgroup-Title 1
item 1
item 2
item 3
endoptgroup
optgroup-Title 2
item 4
item 5
endoptgroup

Then using jQuery searched for the prefix, removed it and replaced the tag with <optgroup label=”Title 1″>

Here is the code:

$(function() {
		//Search for optgroup- items
    	var foundin = $('option:contains("optgroup-")');
    		$.each(foundin, function(value) {

    			//remove optgroup prefix
    			var updated = $(this).val().replace("optgroup-","");
    			//replace items with optgroup tag
    			var replaced = $(this).replaceWith('<optgroup label="'+ updated +'">');
    		});
    	var foundin2 = $('option:contains("endoptgroup")');
    		$.each(foundin2, function(value) {
    			//replace items with </optgroup> tag
    			var replaced = $(this).replaceWith('</optgroup>');

    	});
	});