Java Script Code to Move Items Between Select Lists
By Stephen Bucaro
In this article you'll learn how to use Java Script to move items from one select list
to a second select list. Since the same principle applies in the other direction, we'll
also be able to move the items from the second select list back to the first select list.
I'll explain the code in detail so that you'll be able to fully understand and modify
it for your own use.
The first thing we'll need to do is create the html code for a select list. Shown below
is the basic code for an html select list.
<form name="myForm">
<select name="availableSelect" size="6">
<option>CD Player</option>
<option>Cruise Control</option>
<option>Leather Seats</option>
<option>Moon Roof</option>
<option>Power Locks</option>
<option>Power Windows</option>
</select>
</form>
Here's a few things to note: The select list is contained within <form> </form>
tags. A select list is a form control. The form needs a name attribute name="myForm"
in order to access it with Java Script. All the select list's options are within <select>
</select> tags. The select list also needs a name attribute in order to access it with
Java Script.
Note the size attribute in the <select> tag. If you have many options in the
list you might want to set size to less than the number of options. That will cause
the select list to have a scrollbar. If you set size to 1, the select list will become
a drop down list.
In this application, it's possible to select all the items in a list and move them to the
other list, leaving the first list empty. An empty select list does not maintain its size,
it shrinks down to a minimal size. Not visually appealing. To prevent this we'll need to
add a style attribute to the <select> tag and set its width and height
properties. The code for two select lists with style attributes is shown below.
<form name="myForm">
<select name="availableSelect" style="width:150px; height:100px" size="6" size="6">
<option>CD Player</option>
<option>Cruise Control</option>
<option>Leather Seats</option>
<option>Moon Roof</option>
<option>Power Locks</option>
<option>Power Windows</option>
</select>
<select name="chosenSelect" style="width:150px; height:100px" size="6">
<option value="c1"></option>
<option value="c2"></option>
<option value="c3"></option>
<option value="c4"></option>
<option value="c5"></option>
<option value="c6"></option>
</select>
</form>
Now we are ready to start working with Java Script. As a preliminary, lets answer the question
"how do you access items in select list?". The Java Script statement below shows how to do that.
document.myForm.availableSelect.options[0].text
In the Java Script statement shown above we use dot notation to access the document
object's form element named "myForm", the form's select element named "availableSelect",
the select element's option with the index 0, and we're accessing its text property.
Note: if you understood the above paragraph, this example will be very easy for you. You probably
also understand that we need to add a button to the form to allow the user to move a selected item
from one list to the other. The code for the button is shown below.
<input type="button" value=">" onclick="chooseItem(this.form)">
In the code shown above, the value attribute defines the button's label, in this case a
greater-than character, and the onclick event calls a Java Script function named
chooseItem, passing it the form element's data. The basic code for the Java Script function
is shown below.
<script type="text/javascript">
function chooseItem(form)
{
}
</script>
You should place this Java Script code block within the head section of your webpage.
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
