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.

Answer 1

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 >= 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!

Answer 2

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();

Answer 3

Probably, not the cleanest solution, but it is definitely simpler than removing one-by-one:

document.getElementById("DropList").innerHTML = "";

Answer 4

This is the best way :

function (comboBox) {
    while (comboBox.options.length > 0) {                
        comboBox.remove(0);
    }        
}

Answer 5

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.

Answer 6

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 >= 0; i--) {
  select.options[i] = null;
}

Answer 7

This is a short way:

document.getElementById('mySelect').innerText = null;

One line, no for, no JQuery, simple.

Answer 8

This is a bit modern and pure JavaScript

document.querySelectorAll('#selectId option').forEach(option => option.remove())

Answer 9

function removeOptions(obj) {
    while (obj.options.length) {
        obj.remove(0);
    }
}

Answer 10

Note that a select can have both
- optgroup &
- 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.

Answer 11

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();});

Answer 12

with PrototypeJS :

$('yourSelect').select('option').invoke('remove');

Answer 13

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.

Answer 14

Using JQuery is a prettier, shorter & smarter way to do it!

$('#selection_box_id').empty();

Answer 15

For Vanilla JavaScript there is simple and elegant way to do this:

for(var o of document.querySelectorAll('#DropList > option')) {
  o.remove()
}

Answer 16

Go reverse. Reason is size decreases after each remove.

for (i = (len-1); i > -1; i--) {
    document.getElementById("elementId").remove(i);
}

Answer 17

I think that is the best sol. is

 $("#myselectid").html(''); 

Answer 18

This can be used to clear options:

function clearDropDown(){
  var select = document.getElementById("DropList"),
      length = select.options.length;
  while(length--){
    select.remove(length);
  }
}

<select id="DropList" >
  <option>option_1</option>
  <option>option_2</option>
  <option>option_3</option>
  <option>option_4</option>
  <option>option_5</option>
</select>
<button onclick="clearDropDown()">clear list</button>

Answer 19

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 >= 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 >= 0 ; i--)
        select.remove(i);
}
clearOptions("myselect");

Answer 20

var select = document.getElementById("DropList");
var length = select.options.length;
for (i = 0; i < length; i++) {
  select.options[i].remove();
}

Hope, this code will helps you

Answer 21

var select = document.getElementById('/*id attribute of your select here*/');
for (var option in select){
    select.remove(option);
}

Answer 22

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 < 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.

Answer 23

The simplest solutions are the best, so You just need:

var list = document.getElementById('list');
while (list.firstChild) {
    list.removeChild(list.firstChild);
}

<select id="list">
  <option value="0">0</option>
  <option value="1">1</option>
</select>

Answer 24

for (var opt of document.querySelectorAll('#DropList option'))
{ 
  opt.remove();
}

This solution works with optgroups also.

Answer 25

while(document.getElementById("DropList").childNodes.length>0) 
{
    document.getElementById("DropList").removeChild(document.getElementById("DropList").childNodes[0]);
}

Answer 26

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.

Answer 27

$("#droplist").find('select').val('default');

You can also do this to change the dropdown list goes to default. Make sure to add default in your select dropdown list like this.

"<option value="default">Select option</option>"

Answer 28

Maybe the fastest solution:

document.getElementById("DropList").replaceChildren()

Answer 29

WOW you guys really like complicating things

  document.getElementById('idOfSelect').options.length = 0;

OR

  document.getElementById('idOfSelect').innerHTML = '';

Answer 30

Html

<select multiple="" class="form-select courses" name="courses">
   <option>.....</option>
   ....
</select>

JS

function ClearOptions() {
   var courseSelect = document.querySelector(".courses");

   while (courseSelect.childNodes[0] != null) {
       courseSelect.childNodes[0].remove();
   }
}

Since we are manipulating the array we are using, the index will change with each deletion. Therefore, conditions such as i > 0 do not work correctly. In this case, it would be best to continue the deletion process one by one until there are no Elements left.

Answer 31

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);

        }