Skip to content

How to have a hidden option in a dropdown?

How to have a hidden option in dropdown so that user is unable to see it. Following is the code :

<html:select property="stutype" style="text-transform: uppercase;background-color: #A5A5A5;" styleId="stutype" >
    <html:option value="ABC">ABC</html:option>
    <html:option value="DEF">DEF</html:option>
    <html:option value="XYZ"></html:option>
</html:select> 

User shouldnt be able to see dropdown XYZ option in the dropdown. Mainly it should be hidden.This is because in the backend I’m changing one of the options to this value and proceeding.Kindly help.Thanks in advance.

Answer

A simple solution would be setting the hidden attribute. for the particular option.

<html:select property="stutype" style="text-transform: uppercase;background-color: #A5A5A5;"styleId="stutype" >
                    <html:option value="ABC">ABC</html:option>
                    <html:option value="DEF">DEF</html:option>
                    <html:option hidden value="XYZ"></html:option>
</html:select>