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

com Página 1 de 4

Search

Web mredkj.com

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
o Insert Before Selected
o Remove Selected
Insert1
Insert2
Insert4
Insert5
Append0
Append1

o Append Last
o 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.

http://www.mredkj.com/tutorials/tutorial005.html 17/10/2011
HTML/JavaScript - Select list - Add/Remove Options (DOM) - mredkj.com Página 2 de 4

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
}
catch(ex) {
elSel.add(elOptNew, elSel.selectedIndex); // IE only
}
}
}

http://www.mredkj.com/tutorials/tutorial005.html 17/10/2011
HTML/JavaScript - Select list - Add/Remove Options (DOM) - mredkj.com Página 3 de 4

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

http://www.mredkj.com/tutorials/tutorial005.html 17/10/2011
HTML/JavaScript - Select list - Add/Remove Options (DOM) - mredkj.com Página 4 de 4

IE remove

About this page:

■ Home Author: Keith Jenci
Created: Tuesday, January 25, 2005
■ Tutorials Last Updated: Wednesday, October 05, 2005

■ HTML /
Copyright © 2006 novusoft LLC
JavaScript

■ Select
elements

■ feedback

■ about us

■ terms and
conditions

■ site map

■ did this help?

Promoção:
Cadastre-se
Cadastre-se em 5
Seg e Receba
Todo Dia Ofertas
de no Mínimo 50%
OFF!
PeixeUrbano.com.br/+

DropDown
Quantity Menu
Replace your
quantity text boxes
with dropdown
menus in Magento
www.mageparts.com

Debug PHP and

Javascript
Use Visual Studio
2010 to debug
PHP and
Javascript
www.jcxsoftware.com

PHP code
generator
Create better PHP
code Now with
WYSIWYG
support
www.XLineSoft.com/p+

http://www.mredkj.com/tutorials/tutorial005.html 17/10/2011