user961627 user961627 - 8 days ago 8
HTML Question

Make some options in a select menu "unselectable"

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

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>
Comments