user961627 user961627 - 1 year ago 68
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?

Answer Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download