Add-Remove Options (DOM)

Keith Jenci Aug 31, 2007

General

Add or remove objects in a select list, using the DOM. This script was written to work with DOM Level 1 and DOM Level 2 capable browsers, with try/catch logic included for IE use.

Notes

Created by: Keith Jenci
Web Site: http://www.mredkj.com/
Posted: August 31, 2007

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: addRemoveOptions.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Keith Jenci | http://www.mredkj.com/ */
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);
  }
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="addRemoveOptions.js"></script>

Body

Paste this code into the BODY section of your HTML document


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

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details