Picklist Script - Tested in IE7.0, Netscape8.1.2, Opera9.10, Firefox2.0.0.1 and AOL Explorer1.5

This script is a picklist. Add it to your forms to move selections from on column to another.

We have tested the code in IE7.0, Firefox2.0.0.1, Opera9.10, Netscape8.1.2 and AOL Explorer1.5. This script worked well in all platforms with no variations observed.

For your Information: Before we begin, we feel obligated to advise you that the above form is for all intensive purposes a "Stand Alone" script. In other words, it really does not do much of anything other than what you see. In order to make it function as designed, you need to incorporate it into a valid working form. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms and reconfigurations, please "Do Not Attempt" this until you are Proficient in the aforementioned areas.

Depending on your knowledge of HTML and javascripts, this is an easy three (3) part copy and paste code that goes in both the <HEAD> (No reconfigurations needed) and <BODY> (incorporated into a valid form) sections of your document. It also makes use of an onLoad event handler inserted directly into the <BODY> tag.

If you need a little refresher on howto add the onload event handler directly into the <BODY> tag, see the below examples:

Default <BODY> Tag ~ No onLoad event handler

Reconfigured <BODY> Tag ~ onLoad Event Handler Inserted

Other than the above insertion of the onload event handler the only reconfigurations are to replace the default Selection 01, Selection 02 etc. (see below where and howto) with your own options. Once that is done all that is left is to incorporate the <BODY> section of code into a valid form.

<TABLE>
<TR><TD>

<SELECT NAME="SelectList" ID="SelectList" SIZE="5">

<OPTION VALUE="01sel">Selection 01</OPTION>

<OPTION VALUE="02sel">Selection 02</OPTION>

<OPTION VALUE="03sel">Selection 03</OPTION>
</SELECT>

<TABLE>
<TR><TD>

<SELECT NAME="SelectList" ID="SelectList" SIZE="5">

<OPTION VALUE="01sel">Your Selection Here</OPTION>

<OPTION VALUE="02sel">Your Selection Here</OPTION>

<OPTION VALUE="03sel">Your Selection Here</OPTION>
</SELECT>

Define Above Reconfigurations

Where you see the Selection 01 etc. you will replace with your choices. You can have as many or as little as you need depending on your requirements. Just follow the sequence and add all <OPTION VALUE= before the closing </SELECT> tag.
SIZE="5" This refers to how many options will be visible in the textarea field.

Once you have the above reconfigured, all that is left is to incorporate the effect into a working form.

Little Extra Not Included In The Script: Forms at best are bulky and bloated and tend to become confusing with all the coding involved. To cut down on some of the coding on the page itself, you can make use of an external .js file for the <HEAD> and <BODY> sections (and replace the bloated code on the page by just adding sniplets of code to call the effect) and add the onLoad event handler as usual directly into the <BODY> tag. Since this may be slighly confusing it itself, we will take this step by step, first covering the <HEAD> section then continue onto the <BODY> section.

The <HEAD> section of code starts and ends with opening and closing JavaScript tags, See below:

Opens With:
<SCRIPT LANGUAGE="JavaScript">

Head Section Of Code
Closes With:
// End -->
</script>

Remove the opening and closing JavaScript tags.

Copy/cut and paste everything in-between into a notepad and save it as pickListhead.js

The newly created (Saved As) file will look something like this

Upload the newly created pickListhead.js into your directory

Paste the below snipplet of code into the <HEAD> section of your document to call pickListhead.js
<script type="text/javascript" src="pickListhead.js"> </script>

If you have uploaded the pickListhead.js into a different directory, you will have to change the path of the above to reflect the location.

If changing the path is a little confusing, grab the below link and it is explained in detail.
[ Upload To Different Directory ]

To make use of an external.js file for the <BODY> section is slightly different that for the <HEAD> section. Once you have this section of code (<BODY>) reconfigured to your needs, you now have to transpose it into an external.js paste it into a notepad, name it pickListbody.js, upload it into your directory and paste a sniplet of code into your form where you want this effect to appear. This sounds like alot of work but we have a shortcut that you can complete the whole process in less that three (3) minutes. Just grab the below link and we have a generator/converter that instead of hand editing all the HTML, it transposes it instantly into an external .js file.
[ Converter/Generator For External .js Files ]

For your Information: Once you convert the HTML code into an external.js file from our generator/converter, you "Can Not!" edit that code. What we suggest is to keep a copy of the original code to use for editing in case you need to change it.

If you would like to see how we have it set up making use of this effect with external.js files, grab the below link and you are there. We have it very well documented so feel free to view our source code to see how it is done.
[ The Picklist With External .js Files ]

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]