How to clear all options in the drop-down list?

Question

My code works in IE, but breaks in Safari, Firefox, and Opera. (big surprise)

document.getElementById("DropList").options.length=0; 

After searching, I found out that it is length=0 , which he does not like.
I tried ...options=null and var clear=0; ...length=clear var clear=0; ...length=clear with the same result.

I am doing this on several objects at a time, so I am looking for lightweight JS code.

Answer 1

You can use the following to clear all items. note that

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

Answer 2

To remove the parameters of a select html object, you can use this piece of code:

 function removeOptions(selectbox) { var i; for(i = selectbox.options.length - 1 ; i >= 0 ; i--) { selectbox.remove(i); } } //using the function: removeOptions(document.getElementById("mySelectObject")); 

This will work in all browsers. =)

Answer 3

If you want a lightweight script, then go for jQuery. In jQuery, the solution to remove all options would be:

 $("#droplist").empty(); 

Answer 4

This may not be the cleanest solution, but it is definitely easier than removing one at a time:

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

Answer 5

This is the best way:

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

Answer 6

This is the shortest way:

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

One line, no, no jQuery, simple.

Answer 7

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

Answer 8

This is a bit modern and clean JavaScript.

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

Answer 9

with PrototypeJS :

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

Answer 10

If you use jQuery and your control has the identifier "DropList", you can remove its parameters by following these steps:

 $('#DropList option').remove(); 

Actually it works for me with any list of options, for example, datalist.

Hope this helps.

Answer 11

Please note that the choice may have both - optgroup &
- collection of options
like his children.

So,

Method # 1

 var selectElement = document.getElementById('myselectid'); selectElement.innerHTML = ''; 

Method # 2

 var selectElement = document.getElementById('myselectid'); selectElement.textContent = ''; 

I tested, both work in Chrome.
I like the simpler, old-fashioned method # 1.

Answer 12

Try

 document.getElementsByTagName("Option").length=0 

Or maybe look at the removeChild () function.

Or if you use jQuery framework.

 $("DropList Option").each(function(){$(this).remove();}); 

Answer 13

I would like to note that the problem in the original question is no longer relevant today. And there is an even shorter version of this solution:

 selectElement.length = 0; 

I checked that both versions work in Firefox 52, Chrome 49, Opera 36, ​​Safari 5.1, IE 11, Edge 18, the latest versions of Chrome, Firefox, Samsung Internet and UC Browser on Android, Safari on iPhone 6S, Android 4.2. 2 stock browser. I think that we can safely conclude that it is absolutely compatible with any device that is now, so I recommend this approach.

Answer 14

Using jQuery is a nicer, shorter, and smarter way to do it!

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

Answer 15

Go back. The reason for the size reduction after each removal.

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

Answer 16

This can be used to clear parameters:

 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 17

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

Hope this code helps you

Answer 18

I think this is the best evil.

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

Answer 19

The simplest solutions are the best, so you just need to:

 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 20

Items should be removed in reverse order, otherwise it will lead to an error. Also, I do not recommend just setting to null , as this may cause unexpected behavior.

 var select = document.getElementById("myselect"); for (var i = select.options.length - 1 ; i >= 0 ; i--) select.remove(i); 

Or, if you want, 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 21

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

Answer 22

Above the response code, a slight change is needed to remove the list, please check this code fragment.

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

update the length and remove all data from the drop-down list. Hope this helps someone.

Answer 23

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

Answer 24

If you need to support IE and you have more than 100 items in your selection list, I highly recommend that you replace the select function as follows:

 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 must be an element either from the jquery selector or to call document.getElementBy. The only drawback to this is that you lose the events that you connected to the selection, but you can easily reconnect them as it comes back from the function. I worked with select, which had ~ 3k elements, and it took 4 seconds for IE9 to clear the selection so that I could update it with new content. This is done almost instantly.

Answer 25

Today I faced the same problem as when loading the 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); } 

Answer 26

 var select =$('#selectbox').val(); 

Answer 27

$ ("# yourDDL"). get (0) .options.length = 0;