Transfer options

You cannot create or delete options in Netscape 2, Explorer 3 and Opera 3, so this script won't work.

It works wrongly in Opera 4, which may mean that it'll eventually work rightly.

It works in WebTV but users have to click twice on both the Options and the arrows. The second time they press an arrow they always get a JavaScript alert that they haven't selected anything, even though the script works fine.

iCab has trouble with this script. I suppose this will be mended.

Note: This page is no longer maintained. General information about creating and deleting options can be found at the Dynamic options page.

This script is a nice extra in a form where the user has to choose one or more options from a list. It gives the user a graphical representation of what he has to do, so I suppose he'll understand better.

As usual the script runs in this page. Try it below. (The submit buttons does nothing except selecting all options in the right box)

Possible options:

-->
<--

Chosen options:

The script

This is the function:

function copyToList(from,to)
{
  fromList = eval('document.forms[0].' + from);
  toList = eval('document.forms[0].' + to);
  if (toList.options.length > 0 && toList.options[0].value == 'temp')
  {
    toList.options.length = 0;
  }
  var sel = false;
  for (i=0;i<fromList.options.length;i++)
  {
    var current = fromList.options[i];
    if (current.selected)
    {
      sel = true;
      if (current.value == 'temp')
      {
        alert ('You cannot move this text!');
        return;
      }
      txt = current.text;
      val = current.value;
      toList.options[toList.length] = new Option(txt,val);
      fromList.options[i] = null;
      i--;
    }
  }
  if (!sel) alert ('You haven\'t selected any options!');
}

It works on two multiple select boxes:

<FORM etc. onSubmit="allSelect()">
<SELECT NAME="possible" SIZE="4"
	MULTIPLE WIDTH=200 STYLE="width: 200px">
<OPTION VALUE="1">Option 1: House
<OPTION VALUE="2">Option 2: Chamber
<OPTION VALUE="3">Option 3: Kitchen
<OPTION VALUE="4">Option 4: Garden
</SELECT>

<SELECT NAME="chosen" SIZE="4"
	MULTIPLE WIDTH=200 STYLE="width: 200px">
<OPTION VALUE="temp">Make your choice on the left
</SELECT>
</FORM>

and it's called by the links in the middle:

<A HREF="javascript:copyToList('possible','chosen')">--&gt;</A><BR>
<A HREF="javascript:copyToList('chosen','possible')">&lt;--</A>

Finally you need an onSubmit script:

function allSelect()
{
  List = document.forms[0].chosen;
  if (List.length && List.options[0].value == 'temp') return;
  for (i=0;i<List.length;i++)
  {
     List.options[i].selected = true;
  }
}

Layout

The most complicated part of this page is not the script itself but giving the multiple select boxes a nice layout. I used quite a lot of layout code:

<SELECT NAME="possible" SIZE="4"
	MULTIPLE WIDTH=200 STYLE="width: 200px">

Basically the WIDTH is for Netscape and the STYLE is for Explorer. You'll have to fiddle around with them to produce a nice layout.

I have put one sentence in the right select box. Without it the select box to the right would become very narrow in some browsers, because initially there's no text in it. I have written the script so that if you give this option the value 'temp' it'll be deleted the first time an option is brought to the right.

<OPTION VALUE="temp">Make your choice to the left

Explanation

In the link you tell the script from what element to what element the options should be transported, in this case from the select called 'possible' to the select called 'chosen'.

copyToList('possible','chosen')

As you see, these are received by the script as from and to:

function copyToList(from,to)
{

We create two objects fromList and toList that access the correct form elements, then we're ready to go.

  fromList = eval('document.forms[0].' + from);
  toList = eval('document.forms[0].' + to);

First of all, if the initial text is still in the destination box, remove it. We do this by making the length of the toList 0.

  if (toList.options.length > 0 && toList.options[0].value == 'temp')
  {
     toList.length = 0;
  }

Then we set sel to false. Later I'll explain why.

  var sel = false;

Then we're ready to go through the fromList, the select box that the options are to be taken from. One by one, we put the options in the variable current.

  for (i=0;i<fromList.options.length;i++)
  {
    var current = fromList.options[i];

Then we see if the current option is selected.

    if (current.selected)
    {

If it is, we need to do some things, beginning by setting sel to true so that the script remembers that something is selected. I'll explain this below.

      sel = true;

Then we check if the user has selected the temporary text. If so, we shouldn't go any further and give an error message and end the function.

      if (current.value == 'temp')
      {
        alert ('You cannot move this text!');
        return;
      }

If everything is allright, we take the text and value of the selected option and create a new option in toList.

      txt = current.text;
      val = current.value;
      toList.options[toList.length] = new Option(txt,val);

Finally, we remove the selected item from fromList. If we do this, the selected option disappears completely and the number of options (length) is decreased by one. That's why we also decrease i by one: it should continue with the next option, which now has the same number as the option we just removed.

      fromList.options[i] = null;
      i--;
    }
  }

When we have gone through all options in fromList, we're almost ready. The only thing we still need to check is whether anything at all was selected. If nothing was selected, sel is still false. In that case we generate an alert so that the user understands why nothing is happening:

  if (!sel) alert ('You haven\'t selected any options!');
}

The onSubmit script

When the user submits the form, one more thing needs to be done. We need to select all options in the select box 'chosen' because they all should be sent to the server when the form is submitted.

We do this with the function allSelect(), which is called in the FORM tag.

<FORM etc. onSubmit="allSelect()">

The function starts with assigning the variable List so that it accesses the correct select box:

function allSelect()
{
  List = document.forms[0].chosen;

If nothing has been transferred to the select box, the text with VALUE="temp" is still in it. If that is so, we end the function because nothing is selected anyway.

  if (List.length && List.options[0].value == 'temp') return;

Then we go through all options currently in the select box and select all of them.

  for (i=0;i<List.length;i++)
  {
     List.options[i].selected = true;
  }
}

That's it. The script works.