Make some options in a select menu "unselectable"
HtmlHtml SelectHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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>
Solution 2 - Html
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>
Solution 3 - Html
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>
Solution 4 - Html
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>
Solution 5 - Html
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/
Solution 6 - Html
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>
Solution 7 - Html
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.