HTML5 hidden attribute on option tags
This morning I learned about the
hidden attribute that can be added
<option> tags within a
<select> tag. The hidden attribute causes the option to simply not be shown in the list. Hidden elements will are also not selectable and will not return any selected value.
hidden attribute works in most browsers, with ~97.5% of browsers supported. For IE10 and below (depending on the browser breakdown of your application), an acceptable fallback would be to also add the
disabled attribute to the option. The browser in this case would still show the option, but it would be greyed out and not selectable.
As an example, this HTML:
<select> <option>First option</option> <option>Second option</option> <option hidden disabled>Third option</option> </select>
Yields the following result:
And in IE10: