Add/Remove Methods of Select and Options Objects
With a reference to a select box, an
add method can be invoked on it or on its options collection:
// get reference to select element var sel = document.getElementById('selDemo'); var opt = document.createElement('option'); // create new option element // add content to the option element using text property opt.text = 'New Option Element'; sel.add(opt); // use select object's add method //sel.options.add(opt); // OR use sel.options add method
add method definitions are the same for both select and options objects. However, the definition has varied depending upon the source. According to the DOM Level 2 definition, the first argument to the
add method is a reference to the element you wish to add. The second argument is either a reference to an element to insert the new element before, or null to add the new element at the end of the list of options.
According to the Internet Explorer version of the
add method, the second argument is optional. If included, it is the index position of the element you wish to insert the new element before. If the second argument is not included, the new element would be added at the end of the list of options. Fortunately, HTML5 standardizes and combines all of these variations.
remove method has one argument: the index value of the option element you wish to remove.
remove methods on both
options objects test successfully in all current browsers and in Internet Explorer version 9+. Internet Explorer 8 in standards compliant mode supports an element reference as the second argument to the add methods, but Internet Explorer prior to version 8 supported only the proprietary definition described above.