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?

Surplus

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>

Interbreed

wow! I've been doing web development for 10 years and I didn't know there was an element called "optgroup"! Thanks! – Surplus

upvote for teaching me something new (after 20 years of HTML coding) :) – Amblyoscope

Lol I found the optgroup from inspectioning WordReference. Important: if you ever plan to make your HTML XML-validated, make sure you use disabled="disabled", and not disabled only. – Smuggle

I've seen optgroup element a long time ago (i think phpBB forums used it to group subcategories under categories inside dropdown) and totally forgot about it... thanx a million, saved my day – Lacreshalacrimal

Answer 2

I can see from your question the previous answers to mine are in fact what uyou are looking for, however just to note for future people coming to this StackOverflow question alike myself looking for a similar answer they can simple type 'Disabled' in an option.

<select>
  <option value="apple" disabled>Apple</option>
  <option value="peach">Peach</option>
  <option value="pear">Pear</option>
  <option disabled="true" value="orange">Orange</option>
</select>

JSFiddle Demo

Birdwell

Note that disabled doesn't actually have a value, its presence is what makes the element disabled. disabled="", disabled="false", and just disabled all have the same effect. – Interbreed

Please also note that disabled options are never POST'ed back to the server. E.g. if a disabled value was selected when server-rendering the control, the postback value will be set to first non-disabled option (or null if none) – Astrogate

Answer 3

From :How to show disable HTML select option in by default?

This is another way of doing the same thing.

EDIT: (now you are able to run it here)

<label>Unreal :</label>
<select name="unreal">
   <option style="display:none">Select One</option>
   <option>Money</option>
   <option>Country</option>
   <option>God</option>
</select>

Hauteur

I think OP wants elements that are visible but not selectable. – Esquimau

@TobySpeight yes correct, and if you try my method, at first it will be visible, but when you click the select button, You will not be able to select the first option. The option itself will not be visible anymore. Give it a shot. – Hauteur

@TobySpeight give the snippet a go. – Hauteur

I tried it, but it's still not what's wanted - whilst it's useful for some things, I never made your version work for the question's CITY 2 header that's not the first element - that is always invisible. It seems much better to use an optgroup element, or the disabled attribute. – Esquimau

I just reread the question again, and i guest you are right. Should i change my answer, or totally delete it? – Hauteur

Depsite not what being OP asked, this is what I needed :) – Lorgnon

Answer 4

jsFiddle Demo

You would use 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>

Frederick

Answer 5

There is a lot of option to make this happens, I recommend a plugin of jquery named Chosen:

It will be like:

<select data-placeholder="Choose a Country..." class="chosen-select chose-select-width-custom" multiple tabindex="4" name="countryDigestValues">                                             <option value=""></option>                                                                  
  <optgroup class="custom-optgroup-class" label="Label Title">  
     <option class="custom-option-class">Here goes the option to select</option>                                                                          
  </optgroup>
 </select>

Here is the link, https://harvesthq.github.io/chosen/

Rampage

Answer 6

Simply add disable attribute to that option tag which you don't want to select

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

Lowry

Answer 7

Actually, you can use both selected and disabled attributes on an <option> element in case you wanted to have a sort of an inline label to give basic instructions without letting the user to select it.

<optgroup> works great too.

Androcles

Answer 8

Amid the many responses. It depends on what you want to do with the first option. If you want to display it as some sort of a guide. Say for example option 1 is "Select City" but you don't want users to select it.

 <option style={{display: "none"}}>Select City</option>

By using the above code, Select City would be the default option. But users will not be able to select it from the options. Using disable will not render the default, nor be selectable. You might consider an if statement if you want to disable the option conditionally.

Ean