How do I clear all options in a dropdown box

Question

My code works in IE but breaks in Safari  Firefox  and Opera   big surprise   document getElementById  DropList   options length 0    After searching  I ve learned that it s the length 0 that it doesn t like  I ve tried    options null and var clear 0     length clear with the same result   I am doing this to multiple objects at a time  so I am looking for some lightweight JS code

User · Answer

The simplest solutions are the best  so You just need    x000D   x000D  var list   document getElementById  list    x000D  while  list firstChild    x000D      list removeChild list firstChild   x000D    x000D   lt select id  list  gt  x000D     lt option value  0  gt 0 lt  option gt  x000D     lt option value  1  gt 1 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

function removeOptions obj        while  obj options length            obj remove 0

User · Answer

I think that is the best sol  is      myselectid   html

User · Answer

The items should be removed in reverse  otherwise it will cause an error  Also  I do not recommended simply setting the values to null  as that may cause unexpected behaviour   var select   document getElementById  myselect    for  var i   select options length - 1   i  gt   0   i--      select remove i     Or if you prefer  you can make it a function   function clearOptions id        var select   document getElementById id       for  var i   select options length - 1   i  gt   0   i--          select remove i     clearOptions  myselect

User · Answer

This is the best way    function  comboBox        while  comboBox options length  gt  0                            comboBox remove 0

User · Answer

Note that a select can have both - optgroup  amp  - options collection  as its children     So   Method  1  var selectElement   document getElementById  myselectid    selectElement innerHTML         Method  2  var selectElement   document getElementById  myselectid    selectElement textContent         I tested  both work on Chrome  I like the simpler  the old fashioned  method  1

User · Answer

with PrototypeJS       yourSelect   select  option   invoke  remove

User · Answer

For Vanilla JavaScript there is simple and elegant way to do this   for var o of document querySelectorAll   DropList  gt  option        o remove

User · Answer

Using JQuery is a prettier  shorter  amp  smarter way to do it       selection box id   empty

User · Answer

This can be used to clear options    x000D   x000D  function clearDropDown    x000D    var select   document getElementById  DropList    x000D        length   select options length  x000D    while length--   x000D      select remove length   x000D      x000D    x000D   lt select id  DropList   gt  x000D     lt option gt option 1 lt  option gt  x000D     lt option gt option 2 lt  option gt  x000D     lt option gt option 3 lt  option gt  x000D     lt option gt option 4 lt  option gt  x000D     lt option gt option 5 lt  option gt  x000D   lt  select gt  x000D   lt button onclick  clearDropDown    gt clear list lt  button gt  x000D   x000D   x000D

User · Answer

If you wish to have a lightweight script  then go for jQuery   In jQuery  the solution for removing all options will be like        droplist   empty

User · Answer

Go reverse  Reason is size decreases after each remove   for  i    len-1   i  gt  -1  i--        document getElementById  elementId   remove i

User · Answer

I d like to point out that the problem in the original question is not relevant today anymore  And there is even shorter version of that solution   selectElement length   0    I ve tested that both versions work in Firefox 52  Chrome 49  Opera 36  Safari 5 1  IE 11  Edge 18  latest versions of Chrome  Firefox  Samsung Internet and UC Browser on Android  Safari on iPhone 6S  Android 4 2 2 stock browser  I think it is safe to conclude that it s absolutely compatible with whatever device there is right now  so I recommend this approach

User · Answer

Probably  not the cleanest solution  but it is definitely simpler than removing one-by-one   document getElementById  DropList   innerHTML

User · Answer

This is a short way  document getElementById  mySelect   innerText   null   One line  no for  no JQuery  simple

User · Answer

var select   document getElementById  DropList    var length   select options length  for  i   0  i  lt  length  i        select options i  remove        Hope  this code will helps you

User · Answer

If you have to support IE and you have more than 100 items in your select list  I strongly recommend you consider replacing the select with a function like so   function clearOptions select        var selectParentNode   select parentNode      var newSelect   select cloneNode false      Make a shallow copy     selectParentNode replaceChild newSelect  select       return newSelect      The select parameter should be the element either from a jquery selector or document getElementBy call   The only downside to this is that you lose events you had wired up to the select  but you can easily reattach them as it is returned back out of the function   I was working with a select that had  3k items and it would take 4 seconds on IE9 to clear the select so I could update it with the new content   Nearly instant doing it this way

User · Answer

You can use the following to clear all the elements   var select   document getElementById  DropList    var length   select options length  for  i   length-1  i  gt   0  i--      select options i    null

User · Answer

var select   document getElementById    id attribute of your select here      for  var option in select       select remove option

User · Answer

var select      selectbox   val

User · Answer

To remove the options of an HTML element of select  you can utilize the remove   method   function removeOptions selectElement       var i  L   selectElement options length - 1     for i   L  i  gt   0  i--          selectElement remove i              using the function  removeOptions document getElementById  DropList       It s important to remove the options backwards  as the remove   method rearranges the options collection  This way  it s guaranteed that the element to be removed still exists

User · Answer

If you are using JQuery and your select control has ID  DropList  you can remove its options doing this way       DropList option   remove      Actually it works for me with any option list  like datalist    Hope it helps

User · Answer

Today I was facing same problem  I did as below while reloading select box   In Plain JS           var select   document getElementById  item            select options length   0          var opt   document createElement  option            opt value   0          opt innerHTML    Select Item               opt selected    selected           select appendChild opt            for  var key in lands                var opt   document createElement  option                opt value   lands key  id              opt innerHTML   lands key  surveyNo              select appendChild opt

User · Answer

Above answer s code need a slight change to remove the list complete  please check this piece of code   var select   document getElementById  DropList    var length   select options length  for  i   0  i  lt  length       select options i    null    length   select options length      refresh the length and it will remove all the data from drop down list   Hope this will help someone

User · Answer

This is a bit modern and pure JavaScript  document querySelectorAll   selectId option   forEach option   gt  option remove

User · Answer

while document getElementById  DropList   childNodes length gt 0         document getElementById  DropList   removeChild document getElementById  DropList   childNodes 0

User · Answer

Try  document getElementsByTagName  Option   length 0   Or maybe look into the removeChild   function   Or if you use jQuery framework      DropList Option   each function     this  remove

[javascript] How do I clear all options in a dropdown box?

Examples related to javascript

Examples related to html-select