How to hide a <option> in a <select> menu with CSS?

javascript jquery css dom
Jesse Atkinson picture Jesse Atkinson · Feb 10, 2012 · Viewed 220.3k times · Source

I've realized that Chrome, it seems, will not allow me to hide <option> in a <select>. Firefox will.

I need to hide the <option>s that match a search criteria. In the Chrome web tools I can see that they are correctly being set to display: none; by my JavaScript, but once then <select> menu is clicked they are shown.

How can I make these <option>s that match my search criteria NOT show when the menu is clicked? Thanks!

Answer

Lukas Jelinek picture Lukas Jelinek · Jul 1, 2014

For HTML5, you can use the 'hidden' attribute.

<option hidden>Hidden option</option>

It is not supported by IE < 11. But if you need only to hide a few elements, maybe it would be better to just set the hidden attribute in combination with disabled in comparison to adding/removing elements or doing not semantically correct constructions.

<select>  
  <option>Option1</option>
  <option>Option2</option>
  <option hidden>Hidden Option</option>
</select>

Reference.

Related questions

Uncaught TypeError: Cannot read property 'top' of undefined

I apologize if this question has already been answered. I've tried searching for solutions but could not find any that suited my code. I'm still new to jQuery. I have two different types of sticky menus for two different pages. …

Read More
What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQuery

I wrote some example to see what is the difference, but they display me same results for width and height. <html> <head> <script type="text/javascript" src="jquery.js"></script> <script …

Read More
Detecting width: auto in jQuery

I'm retrieving the width of elements using jQuery and would prefer it if I could have an indication of whether there was an explicit width (and height) specified. <div id="test"></div> <script type="text/…

Read More