Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Java Script Code to Move Items Between Select Lists

Available
Selected

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.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268