Adding new items to list fields - Article

Adding new items to list fields 13 November 2000

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;
fld.add(newElem);
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 = "";
BumpUp(lst);
}
}
}
}

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;
break;
}
}
if( ln < box.options.length) {
box.options.length -= 1;
BumpUp(box);
}
}

GOOD LUCK !

Tom Cadmore
Tue 10 Dec 2002

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.

Stephen Vajda
Wed 13 Aug 2003

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.

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

Adding new items to list fields 13 November 2000

Feedback

createelement in netscape 4.7

How to remove an option item

Your Comments

Navigate other articles in the category "Forms"

About This Article

Options

Let's Get Social

About This Website