HTML/JavaScript - Select list - Add/Remove Options (Old School)

select, options, insert, append, remove

Using a technique that works in old and new browsers

Tutorial006 - Try It


Overview

Tutorial006 includes functions to insert, append, and remove options from a multiple select list. The technique can be used in older and newer browsers.

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

Tested on a Windows machine, Tutorial006 works in Netscape 3.04, Netscape 4.74, Netscape 6.1, Netscape 7.1, Mozilla 1.8a6, Firefox 1.0, Opera 7.54, and IE 6.0. Those are just the ones I tested, but it should work in most browsers.

Some minor problems with Netscape. Refer to the Tutorial006 test results page.

Explanation

Add

Using the old school approach, here is the basic code to add an option to the end in a new position:

    theSel.options[theSel.length] = new Option('yourText', 'yourValue');

Remove

Here is the basic code to remove the option in the last position:

    theSel.options[theSel.length - 1] = null;

More

Tutorial006 contains a lot more code, so you may be wondering why.

If you add an option to an existing position, it will overwrite the existing option, so it becomes a little more complicated to insert and append. Tutorial006 rewrites the entire list with the new option in its proper place.

To remove an option anywhere in the list, it's not too complicated. The list is restructured automatically when an option is set to null. (This is true for at least the browsers listed above) The only somewhat tricky part in removeOldSchool is that the loop is in reverse. This is because the length of the list is changing every time an option is removed.

If you examine the code, you'll notice some other logic to make usability more intuitive. For example, there's code to select the options that were selected before an insert/append, and logic to select the option above a deleted option.

You can modify the code to suit your needs. The functions insertOldSchool and appendOldSchool can be combined with some conditional logic.

Tutorial006 - 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 ios = 0;
var aos = 0;
function insertOldSchool(theSel, newText, newValue)
{
  if (theSel.length == 0) {
    var newOpt1 = new Option(newText, newValue);
    theSel.options[0] = newOpt1;
    theSel.selectedIndex = 0;
  } else if (theSel.selectedIndex != -1) {
    var selText = new Array();
    var selValues = new Array();
    var selIsSel = new Array();
    var newCount = -1;
    var newSelected = -1;
    var i;
    for(i=0; i<theSel.length; i++)
    {
      newCount++;
      if (newCount == theSel.selectedIndex) {
        selText[newCount] = newText;
        selValues[newCount] = newValue;
        selIsSel[newCount] = false;
        newCount++;
        newSelected = newCount;
      }
      selText[newCount] = theSel.options[i].text;
      selValues[newCount] = theSel.options[i].value;
      selIsSel[newCount] = theSel.options[i].selected;
    }
    for(i=0; i<=newCount; i++)
    {
      var newOpt = new Option(selText[i], selValues[i]);
      theSel.options[i] = newOpt;
      theSel.options[i].selected = selIsSel[i];
    }
  }
}

function appendOldSchool(theSel, newText, newValue)
{
  if (theSel.length == 0) {
    var newOpt1 = new Option(newText, newValue);
    theSel.options[0] = newOpt1;
    theSel.selectedIndex = 0;
  } else if (theSel.selectedIndex != -1) {
    var selText = new Array();
    var selValues = new Array();
    var selIsSel = new Array();
    var newCount = -1;
    var newSelected = -1;
    var i;
    for(i=0; i<theSel.length; i++)
    {
      newCount++;
      selText[newCount] = theSel.options[i].text;
      selValues[newCount] = theSel.options[i].value;
      selIsSel[newCount] = theSel.options[i].selected;
      
      if (newCount == theSel.selectedIndex) {
        newCount++;
        selText[newCount] = newText;
        selValues[newCount] = newValue;
        selIsSel[newCount] = false;
        newSelected = newCount - 1;
      }
    }
    for(i=0; i<=newCount; i++)
    {
      var newOpt = new Option(selText[i], selValues[i]);
      theSel.options[i] = newOpt;
      theSel.options[i].selected = selIsSel[i];
    }
  }
}

function removeOldSchool(theSel)
{
  var selIndex = theSel.selectedIndex;
  if (selIndex != -1) {
    for(i=theSel.length-1; i>=0; i--)
    {
      if(theSel.options[i].selected)
      {
        theSel.options[i] = null;
      }
    }
    if (theSel.length > 0) {
      theSel.selectedIndex = selIndex == 0 ? 0 : selIndex - 1;
    }
  }
}
//-->
</script>

The HTML

<form>
<input type="button" value="Insert"
 onclick="ios++; insertOldSchool(this.form.selos, 'Insert' + ios, 'insert' + ios);" />
<input type="button" value="Append"
 onclick="aos++; appendOldSchool(this.form.selos, 'Append' + aos, 'append' + aos);" />
<input type="button" value="Remove"
 onclick="removeOldSchool(this.form.selos);" />
<br />
<select name="selos" size="10" multiple="multiple">
<option value="original1">Orig1</option>
<option value="original2">Orig2</option>
<option value="original2" selected="selected">Orig3</option>
<option value="original2">Orig4</option>
</select>
</form>
About this page: