How do I clear all options in a dropdown box?

user_398435 0
Viewed 557999

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.

html-select javascript
27 Answers

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_30759420

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

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

I think that is the best sol. is 

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

user_33979400 
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

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

This solution works with optgroups also.

user_69966660
Related