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

Insert Before Selected
Remove Selected

Append Last
Remove Last


Overview

Related tutorials

There is more than one way to add and remove options from a select list. Here at mredkj.com, there are a few examples.

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

About this page: