How can I hide select options with JavaScript Cross browser

Question

This should work      option   hide       hide options   It works in Firefox  but not Chrome  and probably not in IE  not tested    A more interesting example    lt select gt       lt option class  hide  gt Hide me lt  option gt       lt option gt visible option lt  option gt   lt  select gt   lt script type  text javascript  gt     try to hide the first option    option hide   hide        to select the first visible option    option visible   first   attr  selected    selected     lt  script gt    Or see the example at http   jsfiddle net TGxUf   Is the only option to detach the option elements from the DOM  I need to show them again later  so this would not be very effective

User · Accepted Answer

Unfortunately  you can t hide option elements in all browsers   In the past when I have needed to do this  I have set their disabled attribute  like so        option   prop  disabled   true     I ve then used the hiding where it is supported in browsers using this piece of CSS     select option disabled        display  none

User · Answer

Since you mentioned that you want to re-add the options later  I would suggest that you load an array or object with the contents of the select box on page load - that way you always have a  master list  of the original select if you need to restore it   I made a simple example that removes the first element in the select and then a restore button puts the select box back to it s original state   http   jsfiddle net CZcvM

User · Answer

You can try wrapping the option elements inside a span so that they wont be visible but still be loaded in the DOM  Like below  jQ   ddlDropdown option   wrap   lt span gt       And unwrap the option which contains the  selected  attribute as follows to display already selected option   var selectedOption   jQ   ddlDropdown   find   selected     jQ selectedOption  unwrap      This works across all the browsers

User · Answer

As has been said  you can t display none individual  lt option gt s  because they re not the right kind of DOM elements    You can set  prop  disabled   true   but this only grays out the elements and makes them unselectable -- they still take up space   One solution I use is to  detach   the  lt select gt  into a global variable on page load  then add back only the  lt option gt s you want on demand  Something like this  http   jsfiddle net mblase75 Afe2E     var  sel       sel option   detach       global variable     a   on  click   function  e        e preventDefault        var c    name-of-class-to-show           sel   empty   append   sel filter     c           At first I thought you d have to  clone   the  lt option gt s before appending them  but apparently not  The original global  sel is unaltered after the click code is run     If you have an aversion to global variables  you could store the jQuery object containing the options as a  data   variable on the  lt select gt  element itself  http   jsfiddle net mblase75 nh5eW         sel   data  options       sel option   detach        data variable     a   on  click   function  e        e preventDefault        var  sel       sel   data  options       jQuery object         c    name-of-class-to-show           sel   empty   append   sel filter     c

User · Answer

just modify dave1010 s code for my need    function           fn extend  hideOptions  function             var s   this          return s each function i e                var d     data e   disabledOptions                        e  find  option disabled   disabled      each function                     d push   this  detach                                   data e   disabledOptions   d                      showOptions  function             var s   this          return s each function i e                       var d     data e   disabledOptions                      for  var i in d                      e  append d i                                              jQuery     http   jsfiddle net AbzL3 1

User · Answer

Three years late  but my Googling brought me here so hopefully my answer will be useful for someone else   I just created a second  option  which I hid with CSS  and used Javascript to move the s backwards and forwards between them    lt select multiple id  sel1  gt     lt option class  set1  gt Blah lt  option gt   lt  select gt   lt select multiple id  sel2  style  display none  gt     lt option class  set2  gt Bleh lt  option gt   lt  select gt    Something like that  and then something like this will move an item onto the list  i e   make it visible   Obviously adapt the code as needed for your purpose       sel2  set2   appendTo     sel1

User · Answer

It s possible if you keep in object and filter it in short way     lt select id  driver id  gt   lt option val  1  class  team opion option 21  gt demo lt  option gt   lt option val  2  class  team opion option 21  gt xyz lt  option gt   lt option val  3  class  team opion option 31  gt ab lt  option gt   lt  select gt    -  team id  31   var element       driver id    originalElement   element clone        keep original element  make it global   element find  option   remove       originalElement find   option   team id  each function        change find with your needs         element append   this   0   outerHTML      append found options       https   jsfiddle net 2djv7zgv 4

User · Answer

Had a crack at it myself and this is what I came up with    function            fn extend  detachOptions  function o            var s   this          return s each function                var d   s data  selectOptions                      s find o  each function                     d push   this  detach                                 s data  selectOptions   d                      attachOptions  function o            var s   this          return s each function                var d   s data  selectOptions                      for  var i in d                    if  d i  is o                         s append d i                        console log d i                           TODO  remove option from data array                                                             jQuery       example    select   detachOptions   removeme        b   attachOptions   value 1          You can see the example at http   www jsfiddle net g5YKh   The option elements are fully removed from the selects and can be re-added again by jQuery selector    Probably needs a bit of work and testing before it works well enough for all cases  but it s good enough for what I need

User · Answer

Hiding an  lt option gt  element is not in the spec  But you can disable them  which should work cross-browser      option hide   prop  disabled   true     http   www w3 org TR html401 interact forms html h-17 6

User · Answer

Try this       hide   css  display   none      But I think it doesn t make sense to hide it  if you wanna remove it  just       hide   remove

User · Answer

On pure JS   let select   document getElementById  select id                      let to hide   select select selectedIndex   to hide setAttribute  hidden    hidden      to unhide just  to hide removeAttr  hidden      or  to hide hidden   true       to hide to hide hidden   false      to unhide

User · Answer

I thought I was bright  -   In CSS   option disabled  display none     In Firefox and Chrome  a select with only the enabled options were created  Nice   In IE  the enabled options were shown  the disabled where just blank lines  in their original location  Bad   In Edge  the enabled options shown at top  followed by blank lines for disabled options  Acceptable

User · Answer

This is an enhanced version of  NeverEndingLearner s answer    full browsers support for not using unsupported CSS reserve positions no multiple wrappings    x000D   x000D      hide   click function    x000D       select gt option hide   wrap   lt span gt       no multiple wrappings x000D      x000D   x000D      show   click function    x000D       select span option   unwrap      unwrap only wrapped x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 4 4 jquery min js  gt  lt  script gt  x000D   lt select gt  x000D       lt option class  hide  gt Hide me lt  option gt  x000D       lt option gt visible option lt  option gt  x000D   lt  select gt  x000D   lt button id  hide  gt hide lt  button gt  x000D   lt button id  show  gt show lt  button gt  x000D   x000D   x000D

User · Answer

I know this is a little late but better late than never  Here s a really simple way to achieve this  Simply have a show and hide function  The hide function will just append every option element to a predetermined  hidden  span tag  which should work for all browsers  and then the show function will just move that option element back into your select tag      function showOption value           optionHolder option value    value       appendTo   selectID                    function hideOption value          select option value    value       appendTo   optionHolder

User · Answer

Here s an option that    Works in all browsers Preserves current selection when filtering Preserves order of items when removing   restoring No dirty hacks   invalid HTML         select   each function        var  select     this        select data  options    select find  option          function filter  select  search        var  prev   null      var  options    select data  options        search   search trim   toLowerCase         options each function            var  option     this           var optionText    option text            if search          optionText indexOf search   gt   0                if   option parent   length                         prev    option                  return                            if    prev   select prepend  option               else  prev after  option                prev    option                    else                  option remove                             JSFiddle  https   jsfiddle net derrh5tr

[javascript] How can I hide select options with JavaScript? (Cross browser)

Examples related to javascript

Examples related to jquery

Examples related to cross-browser