Adding new items to list fields

As an example, this is not particularly useful if you are looking for something that is "Plug & Play". However there are times when the methods that are demonstrated may be applicable. Stick with me on this one.

Look at the list of colours in the box below. Click on one of them and it will magically be swapped over in to the "empty" list.

The code required to do this is:

function addNewOption( lst, fld, sel, rmv ){
var txt = lst.options[lst.selectedIndex].text;
var val = lst.options[lst.selectedIndex].value;
var newElem = document.createElement("OPTION");
newElem.text = txt;
newElem.value = (val == '') ? txt : val;
if (sel) fld.selectedIndex = fld.options.length-1;
if (rmv) lst.options.remove(lst.selectedIndex);

You can place calls to this function anywhere you like, such as the onChange, onClick, onLoad events or behind a button. In the above example it is in the "onClick" event of the source list:

<select name="source" size="8" onClick="if (this.selectedIndex > 0) addNewOption( this, this.form.dynamic, false, true );">

*This call first checks that the user did not click on the first option which is only there as a hint. If you do not use this option then simply remove the "if" statement.

The three arguments passed in to the function allow it to be fairly generic in the way it gets used:
  • lst - An object reference to the source list. In this case it is the field itself, so we use the reserved word this.
  • fld - An object reference to the destination field. This does not have to be on the current form. For example, if the function is in a popup-window you could pass an object reference to window.opener.document.forms[0].dynamic as the argument.
  • sel - A boolean (true/false) variable that tells the function whether or not to select the new option, once added.
  • rmv - A boolean variable that tells the function whether or not to remove the chosen item from the source list.

The source and destination fields do not have to be multi-line select elements. You can use the above function with any of the <select> element types e.g. drop-down lists.

Note: The above function is Internet Explorer friendly only. This is due mainly to the fact that its DOM (Document Object Model) supports the add() and remove() methods of the select element's option collection. You can do the above in Netscape using the following functions:

function addNewOption(lst, fld, sel, rmv) {
for(var i=0; i < lst.options.length; i++) {
if(lst.options[i].selected && lst.options[i].value != "") {
var no = new Option();
no.value = lst.options[i].value;
no.text = lst.options[i].text;
fld.options[fld.options.length] = no;
if (sel) fld.selectedIndex = fld.options.length-1;
if (rmv) {
lst.options[i].value = "";
lst.options[i].text = "";

function BumpUp(box) {
for(var i=0; i<box.options.length; i++) {
if(box.options[i].value == "") {
for(var j=i; j<box.options.length-1; j++) {
box.options[j].value = box.options[j+1].value;
box.options[j].text = box.options[j+1].text;
var ln = i;
if( ln < box.options.length) {
box.options.length -= 1;


  1. createelement in netscape 4.7

    Hi Jake.

    Nice code and works a treat in IE5 and 6.

    What are the alternatives to the following 'functions' in NS 4.7 as they refuse to work for me?

    createElement options.remove options.add

    Should i be using a different function to reflect the different object model?

    Thanks in advance, Tom.

  2. How to remove an option item

    I was very much appreciated your advice how to transfer items from one option element to another but how does how do the reverse.

    I would imagine you would call the same function from the new element but how does one code an element which does not exist.

    I know that sounds dumb but I think you know what I mean.

    Thanks Steve

    PS. I'm a complete novice to Javascript and DHTML.

Your Comments


Navigate other articles in the category "Forms"

« Previous Article Next Article »
AutoTabbing in a form   How to make hidden fields temporary

About This Article

Author: Jake Howlett
Category: Forms
Keywords: List; select; drop down;


Print Friendly

Let's Get Social

About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »