Javascript Clear Select Options Fast

Use the Javascript function below to quickly remove or delete all the items from a select box/dropdown list in your web page.

Source Code

The following Javascript functions are hereby granted to the public domain. Read below for how to implement these functions.

// Standard javascript function to clear all the options in an HTML select element
// In this method, you provide the id of the select dropdown box
function ClearOptions(id)
{
	document.getElementById(id).options.length = 0;
}

// Standard javascript function to clear all the options in an HTML select element
// In this method, you just provide the form name and dropdown box name
function ClearOptionsAlt(FormName, SelectName)
{
	document.forms[FormName].elements[SelectName].options.length = 0;
}

// Fast javascript function to clear all the options in an HTML select element
// Provide the id of the select element
// References to the old <select> object will become invalidated!
// This function returns a reference to the new select object.
function ClearOptionsFast(id)
{
	var selectObj = document.getElementById(id);
	var selectParentNode = selectObj.parentNode;
	var newSelectObj = selectObj.cloneNode(false); // Make a shallow copy
	selectParentNode.replaceChild(newSelectObj, selectObj);
	return newSelectObj;
}

// This is an alternative, simpler method.  Thanks to Victor T.
// It does not appear to be as fast as the ClearOptionsFast method in FF 3.6.
function ClearOptionsFastAlt(id)
{
	document.getElementById(id).innerHTML = "";
}

Example of Removing Options From a Drop-Down List

How To Remove Options

Simple

The standard way to clear all the options is to simply set the options.length property to zero. That function is listed below, and is fast enough when there are not that many options in the drop-down list (a.k.a. select boxes). This method is also the most browser-compatible. By clicking the the ‘add options’ and ‘remove options’ button above, you can see the required processing time in milliseconds.

Wrong

There are many sample codes on the Internet that loop through all the options in a for loop. Each option is removed one at a time with a call to remove or by setting them to null. This is unnecessary at best, and slow and inefficient at best. The simple method requires fewer lines of code and runs faster.

Fast Method

The problem comes when you have 1000s of options in the drop-down list. Many browsers use 100% CPU and hang when removing that many options from a drop-down list. This is most likely not due to the Javascript speed, but an operating system limitation. This operation sometimes appears to be O(n^2), i.e. taking exponentially more time as the number of options increases.

I tried and timed various methods, such as hiding/showing and disabling/enabling the drop-down list. Finally, I came up the idea of removing the drop-down list completely, and adding back an empty copy of the original one. This is possible with calls to cloneNode and replaceChild on the document object. The removed HTMLSelectElement (with all it’s options) is simply discarded, and the memory is freed by the browser when doing garbage collection. A new one is shallow cloned from the old one, and inserted back into the page. This is a O(1) or constant time operation. The deletion is offloaded into the browser’s back-end garbage collection thread, which allows the UI to continue operating at full-speed. The function is suitable for very large select boxes.

You can test this in your browser by adding 1000 or more options above, and then clicking one of the remove buttons. Note, if you add too many options, your browser may hang for awhile. The fast function is incorporated into this widget, Javascript Autocomplete Combobox and Search Widget, and is called after using the ‘load all matches’ button.

In IE 6, the standard method has the annoying effect of scrolling through the options while they are being erased. The fast method avoids this.

The alternate fast method was provided by Victor T., and it has not been tested in all browsers, but seems to work well and be simpler.

Caveats

References to the original SELECT object will become invalidated! If you had created references to the select object in your code, make sure to re-initialize those references again after calling the function. This is because the function will destroy the original SELECT object. The function returns a reference to the new SELECT object.

You should set a fixed width, so that the list does not annoyingly change size as options are added and removed. An example is below.

<select id="MySelect" size="5" style="width:50ex;">
	<option>This dropdown will be filled/emptied</option>
</select>

<input type="button" value="fast remove"
   onclick="ClearOptionsFast('MySelect');">

Notes

Don’t you wish you could append the above functions prototype of the HTMLSelectElement element? Unfortunately, IE 6 and 7 will not allow you to do that, so you will have to stick with the above stand-alone functions for now. The above code was tested in IE6, FireFox 3, and Opera 9.1.