Category dropdown in Channel Form, with parent cats as option group labels?

Question

I'm having a few issues with categories at the moment that seems like it should be simple, but it is not.

I have a category set up which contains a list of UK counties. This consists of 4 parent categories (the countries - England, Scotland, Wales & Ireland) and many child categories for each (the individual counties).

I am trying to output the categories into a select dropdown within a channel form, with some structure.

I want the parent categories to show as a 'non selectable' label, and the child cats organised beneath.

This way users can only select a single county, and the parent category should be selected as it is set to 'auto-assign' within the settings.

In other words, I want it to look like this...

instead of this...

Any ideas? Everything I've tried (including this question here and I am still unable to get it working!)

(The first picture was achieved via the P&T dropdown in a custom field)

UPDATE:

The answer below got this working and I am using the following...

<select name="category[]" id="categories">
  <option value="">Select one...</option>
{categories}
  <option value="{category_id}" {if "{category_depth}" == "1"}disabled{/if}{selected}>{category_name}</option>
{/categories}
</select>

Only thing now is validating it? Is there a way to make a category required via the native (i'm using inline) error handling?

Answer 1

When outputting your category options do something like

<option value="{category_id}" {if "{category_depth}" == "1"}disabled{/if}>{category_name}</option>

Edit (sources): http://www.w3schools.com/tags/att_option_disabled.asp http://ellislab.com/expressionengine/user-guide/modules/channel/channel_form/#category-depth