Contact Form 7 “non-selectable” options in a drop down

Question

I'm using CF7 and I need to have a dropdown with a non selectable category "header" such as

US States

AL

AK

AR...etc.

Countries

Afganistan

Albania etc....

With "US States" and "Countries" not an option to submit. Thanks http://wordpress.org/extend/plugins/contact-form-7/[1]

EDIT: I solved the problem myself if anyone has the same issue

I used JQuery and gave the options I wanted to make non-selectable an empty value.

$("option:nth-child(1), option:nth-child(1)").val("");
$("option:nth-child(1), option:nth-child(53)").val("");
 });`

Answer 1

I can see how your solution works, but there is a semantic element created for exactly what you want: <optgroup>. Whatever your solution, I'd encourage you to use that instead.

Searching for "contact form 7 optgroup" you'll discover that other people are looking for the same thing you are and trying to implement <optgroup> to do it. Here's one answer that includes both a javascript solution and a plugin hack (probably not a good idea). Probably the better solution I've found is this one. It's a javascript to replace Contact Form 7 select options with the optgroup element using a specified syntax.

That final solution should probably remain stable even if CF7 adds optgroup support down the road.