Add/Remove Methods of Select and Options Objects

This page provides information on the add and remove methods available for both select and options objects. See also other ways to add and remove options in select boxes.

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

Method Arguments

The 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.

The remove method has one argument: the index value of the option element you wish to remove.

Browser Support

The add and remove methods on both select and 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.

See examples demonstrating these methods for both select and options objects.