Make some options in a select menu "unselectable"

Question

I have a select element with a few options, but I want some of the options to not be selectable.

Basically it's like this:

<select>
    <option> CITY 1 </option>
    <option> City 1 branch A </option>
    <option> City 1 branch B </option>
    <option> City 1 branch C </option>
    <option> CITY 2 </option>
    <option> City 2 branch A </option>
    <option> City 2 branch B </option>
    ...
</select>

So as you can see, I don't want the cities do be directly selectable, but only the options that come under each city.

How can it be done that the user can click on CITY 1 or CITY 2 but it won't be selected, so the user is forced to choose one of the branches underneath?

Answer 1

You're probably looking for an <optgroup>:

<select>
    <optgroup label="CITY 1">
        <option>City 1 branch A</option>
        <option>City 1 branch B</option>
        <option>City 1 branch C</option>
    </optgroup>

    <optgroup label="CITY 2">
        <option>City 2 branch A</option>
        <option>City 2 branch B</option>
    </optgroup>
</select>

Demo: http://jsfiddle.net/Zg9Mw/

If you do need to make regular <option> elements unselectable, you can give them the disabled attribute (it's a boolean attribute, so the value doesn't matter at all):

<option disabled>City 2 branch A</option>