javascript 快速清空Select控件的Options--http://www.somacon.com/p542.php
Posted on 2009-09-15 10:24 懒人ABC 阅读(1354) 评论(1) 编辑 收藏 举报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; }
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.
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.