How to hide a option in a select menu with CSS

Question

I ve realized that Chrome  it seems  will not allow me to hide  lt option gt  in a  lt select gt   Firefox will   I need to hide the  lt option gt 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  lt select gt  menu is clicked they are shown   How can I make these  lt option gt s that match my search criteria NOT show when the menu is clicked  Thanks

User · Answer

Since you re already using JS  you could create a hidden SELECT element on the page  and for each item you are trying to hide in that list  move it to the hidden list  This way  they can be easily restored   I don t know a way offhand of doing it in pure CSS    I would have thought that the display none trick would have worked

User · Answer

Select inputs are tricky in this way  What about disabling it instead  this will work cross-browser     select   children   nth-child even    prop  disabled   true    This will disable every-other  lt option gt  element  but you can select which ever one you want  Here is a demo  http   jsfiddle net jYWrH  Note  If you want to remove the disabled property of an element you can use  removeProp  disabled    Update You could save the  lt option gt  elements you want to hide in hidden select element      visible   on  change   function            this  children   eq this selectedIndex  appendTo   hidden         You can then add the  lt option gt  elements back to the original select element      hidden   children   appendTo   visible     In these two examples it s expected that the visible select element has the id of visible and the hidden select element has the id of hidden  Here is a demo  http   jsfiddle net jYWrH 1  Note that  on   is new in jQuery 1 7 and in the usage for this answer is the same as  bind    http   api jquery com on

User · Answer

You have to implement two methods for hiding  display  none works for FF  but not Chrome or IE  So the second method is wrapping the  lt option gt  in a  lt span gt  with display  none  FF won t do it  technically invalid HTML  per the spec  but Chrome and IE will and it will hide the option   EDIT  Oh yeah  I already implemented this in jQuery   jQuery fn toggleOption   function  show         jQuery  this   toggle  show        if  show             if  jQuery  this   parent   span toggleOption    length               jQuery  this   unwrap           else           if  jQuery  this   parent   span toggleOption    length    0               jQuery  this   wrap    lt span class  toggleOption  style  display  none     gt                 EDIT 2  Here s how you would use this function   jQuery selector  toggleOption true      show option jQuery selector  toggleOption false      hide option   EDIT 3  Added extra check suggested by  user1521986

User · Answer

Simplest way  var originalContent      select   html        select   change function            select   html originalContent     Restore Original Content        select option myfilter 1    remove       Filter my options

User · Answer

WARNING      Replace the second  IF  by  WHILE  or doesn t work    jQuery fn toggleOption   function  show         jQuery  this   toggle  show        if  show             while  jQuery  this   parent   span toggleOption    length               jQuery  this   unwrap           else           jQuery  this   wrap    lt span class  toggleOption  style  display  none     gt

User · Answer

Late to the game  but most of these seem quite complicated   Here s how I did it   var originalSelect       select-2   html        filter select-2 on select-1 change     select-1   change function  e         var selected     this  val            reset select ready for filtering         select-2   html originalCourseSelect        if  selected               filter             select-2 option   not   t    selected  remove                 markup of select-1    lt select id  select-1  gt   lt option value    gt Please select lt  option gt   lt option value  1  gt One lt  option gt   lt option value  2  gt Two lt  option gt   lt  select gt    markup of select-2    lt select id  select-2  gt   lt option class  t1  gt One lt  option gt   lt option class  t2  gt Two lt  option gt   lt option gt Always visible lt  option gt   lt  select gt

User · Answer

The toggleOption function is not perfect and introduced nasty bugs in my application  jQuery will get confused with  val   and  arraySerialize   Try to select options 4 and 5 to see what I mean    lt select id  t  gt   lt option value  v1  gt options 1 lt  option gt   lt option value  v2  gt options 2 lt  option gt   lt option value  v3  id  o3  gt options 3 lt  option gt   lt option value  v4  gt options 4 lt  option gt   lt option value  v5  gt options 5 lt  option gt   lt  select gt   lt script gt  jQuery fn toggleOption   function  show         jQuery  this   toggle  show        if  show             if  jQuery  this   parent   span toggleOption    length               jQuery  this   unwrap           else           jQuery  this   wrap    lt span class  toggleOption  style  display  none     gt                    o3   toggleOption false        t   change function e        if   this  val      this value        console log  Error values not equal   this value    this  val                lt  script gt

User · Answer

Ryan P s answer should be changed to       jQuery fn toggleOption   function  show              this  toggle show           if  show                if    this  parent  span toggleOption   length                    this  unwrap              else                 if    this  parent  span toggleOption   length  0                      this  wrap   lt span class  toggleOption  style  display  none     gt                        Otherwise it gets wrapped in too many  tags

User · Answer

For HTML5  you can use the  hidden  attribute    lt option hidden gt Hidden option lt  option gt    It is not supported by IE  lt  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    x000D   x000D   lt select gt    x000D     lt option gt Option1 lt  option gt  x000D     lt option gt Option2 lt  option gt  x000D     lt option hidden gt Hidden Option lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    Reference

User · Answer

I would suggest that you do not use the solutions that use a  lt span gt  wrapper because it isn t valid HTML  which could cause problems down the road  I think the preferred solution is to actually remove any options that you wish to hide  and restore them as needed  Using jQuery  you ll only need these 3 functions   The first function will save the original contents of the select  Just to be safe  you may want to call this function when you load the page   function setOriginalSelect   select        if   select data  originalHTML      undefined             select data  originalHTML    select html              If it s already there  don t re-set it     This next function calls the above function to ensure that the original contents have been saved  and then simply removes the options from the DOM   function removeOptions   select   options        setOriginalSelect  select        options remove         The last function can be used whenever you want to  reset  back to all the original options   function restoreOptions   select        var ogHTML    select data  originalHTML        if  ogHTML    undefined             select html ogHTML             Note that all these functions expect that you re passing in jQuery elements  For example       in your search function    var  s      select someClass    var  optionsThatDontMatchYourSearch   s find  options someOtherClass    restoreOptions  s      Make sure you re working with a full deck removeOptions  s   optionsThatDontMatchYourSearch      remove options not needed   Here is a working example  http   jsfiddle net 9CYjy 23

User · Answer

You should remove them from the  lt select gt  using JavaScript  That is the only guaranteed way to make them go away

User · Answer

Simple answer  You can t  Form elements have very limited styling capabilities   The best alternative would be to set disabled true on the option  and maybe a gray colour  since only IE does that automatically   and this will make the option unclickable   Alternatively  if you can  completely remove the option element

User · Answer

this one seems to work for me in chrome      selectid span option   unwrap        selectid option not  filterattr filtervalue     wrap   lt span  gt

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

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to dom