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

原文： http://www.mredkj.com/tutorials/tutorial005.html

Tutorial005 - Try It

 Insert Before Selected
 Remove Selected

  Orig1

 Orig2

  
 Append Last
 Remove Last

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.

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.

• tutorial005 - Insert, remove, append last, remove last. For DOM compliant browsers only.
• tutorial006 - Insert, append, remove. Works in older and newer browsers.
• tutorial_mixed2b - Move options between two select lists. Works in older and newer browsers.

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" οnclick="insertOptionBefore(count1++);" />
Insert Before Selected<br />
<input type="button" value="o" οnclick="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" οnclick="appendOptionLast(count2++);" />
Append Last<br />
<input type="button" value="o" οnclick="removeOptionLast();" />
Remove Last
</form>