HTML/JavaScript - Select list - Add/Remove Options (DOM)

select, options, insert, remove, append last, remove last

Using a technique that works in DOM compliant browsers

Tutorial005 - Try It

Overview

Insert Before Selected - A new option is created and added above the selected option (as determined by selectedIndex). If none are selected, then no option is added.
Remove Selected - Deletes the selected option (or options) from the list. If no options are selected, no options are deleted.
Append Last - No matter what is selected, a new option is added at the end.
Remove Last - No matter what is selected, the last option is deleted from the list.

Browser Support

Several years ago, I would write examples that might have separate code for Netscape and Internet Explorer. These days there are still two categories: standards compliant and non-standards compliant.

This Select list example was written to work with DOM Level 1 and DOM Level 2 capable browsers. However, IE doesn't conform to the specification for the add method, so some special try/catch logic has been included.

Tested on a Windows 2000 machine, the example on this page works in Firefox 1.0, Opera 7.54, Netscape 7.1, Netscape 6.1, and IE 6.0. Received some feedback saying that it works in IE 5.0 also.

Explanation

According to DOM Level 1, the following is the syntax for the add and remove methods in HTMLSelectElement:

void add(in HTMLElement element, in HTMLElement before) raises(DOMException);
void remove(in long index);

The add method takes two arguments: the element to add, and the element to insert before. The spec also says you can add to the end of the list by passing null as the second argument.

The remove method just takes a number: the index of the option to be removed.

Tutorial005 - Full Source

Public Domain

The HTML and JavaScript listed below are released to the public domain. Read the Terms of Use for details. The contents of this page are still copyrighted.

The JavaScript

<script language="JavaScript" type="text/javascript">
<!--
var count1 = 0;
var count2 = 0;

function insertOptionBefore(num)
{
  var elSel = document.getElementById('selectX');
  if (elSel.selectedIndex >= 0) {
    var elOptNew = document.createElement('option');
    elOptNew.text = 'Insert' + num;
    elOptNew.value = 'insert' + num;
    var elOptOld = elSel.options[elSel.selectedIndex];  
    try {
      elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
    }
    catch(ex) {
      elSel.add(elOptNew, elSel.selectedIndex); // IE only
    }
  }
}

function removeOptionSelected()
{
  var elSel = document.getElementById('selectX');
  var i;
  for (i = elSel.length - 1; i>=0; i--) {
    if (elSel.options[i].selected) {
      elSel.remove(i);
    }
  }
}

function appendOptionLast(num)
{
  var elOptNew = document.createElement('option');
  elOptNew.text = 'Append' + num;
  elOptNew.value = 'append' + num;
  var elSel = document.getElementById('selectX');

  try {
    elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
  }
  catch(ex) {
    elSel.add(elOptNew); // IE only
  }
}

function removeOptionLast()
{
  var elSel = document.getElementById('selectX');
  if (elSel.length > 0)
  {
    elSel.remove(elSel.length - 1);
  }
}
//-->
</script>

The HTML

<form>
<input type="button" value="o" onclick="insertOptionBefore(count1++);" />
Insert Before Selected<br />
<input type="button" value="o" onclick="removeOptionSelected();" />
Remove Selected<br />
<select id="selectX" size="10" multiple="multiple">
<option value="original1" selected="selected">Orig1</option>
<option value="original2">Orig2</option>
</select>
<br />
<input type="button" value="o" onclick="appendOptionLast(count2++);" />
Append Last<br />
<input type="button" value="o" onclick="removeOptionLast();" />
Remove Last
</form>

Supplemental Information

(external links - open in new window)

DOM Level 1 HTMLSelectElement add

DOM Level 1 HTMLSelectElement remove

IE add

IE remove