user961627 user961627 - 2 months ago 23
HTML Question

Make some options in a select menu "unselectable"

I have a

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

Basically it's like this:

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

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
but it won't be selected, so the user is forced to choose one of the branches underneath?


You're probably looking for an <optgroup>:

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

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


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>