Menu
The only way to do that is to add an empty option. A <select> always has something selected; if the user hasn't interacted with the control, and none of the <option> elements have the "selected" attribute, then the first one is selected.
In order to change the selected option by the value attribute, all we have to do is change the value property of the <select> element. The select box will then update itself to reflect the state of this property. This is the easiest and most straightforward way of updating a select box state.
According to HTML specs, the select tag in HTML doesn't have a readonly attribute, only a disabled attribute. So if you want to keep the user from changing the dropdown, you have to use disabled . The only problem is that disabled HTML form inputs don't get included in the POST / GET data.
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>
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
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>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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With