SQL PHP HTML ASP JavaScript articles and free scripts to download
JavaScript Form Validation Listbox

Transferring options from one multiple selection boxes to other

Date picker from Calendar
We can transfer options from one selection box to other by selecting one by one or at one go. The uses of such a type of selection are you can select more than one options and it offers a better picture than selecting a group of checkboxes. To get an idea how the script works, see the demo at the end of this page. You can download the page with this code also.

This tutorial explains on how to move elements from one list to other, there are one more tutorial where the second list options are dynamically added or generated based on the selection of the first list.

You can see there are four main functions the page does and each is connected to one button. All the buttons have onlick event handler connected to one function. The page on load calls one function adoption_all_list() through the body tag to populate the first drop down box with default values. There are tutorials on adding elements or options to a list box to know how the function works. There is another tutorial on removing options from the list box. You must read these two tutorials before reading this. So out of the four buttons we will discuss the button which moves the selected options from first list box to second list box. For other functions refer to those adding and removing option tutorials.

Demo of Moving and adding options to list box

The function we will discuss is addOption_list(), it moves the selected options to the second list box. On execution of this function it collects the elements selected, to do this a for loop is used which loops through all the options of the first list box. The line

for(i=document.drop_list.Category.options.length-1;i>=0;i--)

> does that. While inside the loop we can get the status of any element by checking selected event and it returns true if the element is selected. Then we can use if condition to get the status.

if(document.drop_list.Category[i].selected)

So if it is selected then we have to execute two steps ( inside the above if condition ) first we will add the option to second drop down list and then remove it from first list. Here are the two steps.

addOption(document.drop_list.SubCat, document.drop_list.Category[i].value, document.drop_list.Category[i].value);
removeOption(Category,i);


The first step uses addOption function to insert the option and the second step uses removeOption function to remove that element from fist list box.

Here is the full function code for moving elements from one drop down to second drop down.

function addOption_list(){
for(i=document.drop_list.Category.options.length-1;i>=0;i--) {
var Category=document.drop_list.Category;
if(document.drop_list.Category[i].selected){
addOption(document.drop_list.SubCat, document.drop_list.Category[i].value, document.drop_list.Category[i].value);
removeOption(Category,i);
}
}
}


Here is the html code to display the drop down boxes and the buttons.

<body onload="addOption_all_list()" ;>

<form name="drop_list" action="yourpage.php" method="post">
<input onclick="addOption_all_list()" ;="" value="Add All" type="button">


<select name="Category" multiple="multiple" size="7">
<option value="PHP">PHP</option>
<option value="ASP">ASP</option>
<option value="JavaScript">JavaScript</option>
<option value="HTML">HTML</option><option value="Perl">Perl</option><option value="MySQL">MySQL</option></select>
 <input onclick="addOption_list()" ;="" value="Move >" type="button"> <input onclick="move_all_Option()" ;="" value="Move All >>" type="button"> <select id="SubCat" name="SubCat" multiple="multiple" size="7"></select><input onclick="removeAllOptions(SubCat)" ;="" value="Remove All" type="button">
</form>

Number of User Comments : 7


Google+

More on List Box & JavaScript
sanjeev25-06-2010
nice tutorial i will try
Davor31-08-2010
maybe this code below will be better, because value could be ID of item. so second parameter should be text not value. nice tutor btw. addOption(document.drop_list.SubCat, document.drop_list.Category[i].text, document.drop_list.Category[i].value);
amit20-04-2014
help me...
suppose some data is fetched from database using while(mysql_fetch_array(**)
and i want that on click of each fetched data from database one div must be opened up ..please somebody tell me help please
smo21-04-2014
You can collect the data and store them inside div tag for each record. Then display when user clicks on it. You can see the demo of FAQ script here.

Or you can send the record id as soon as the user clicks the div tag by using Ajax and return the record details.
smo24-04-2014
One script is developed and is available here. How to display record details by user on click
xxx30-11-2014
whats "yourpage.php"?
smo30-11-2014
To this page all the form data will be submitted. You can change the name.
Post Comment This is for short comments only. Use the forum for more discussions.
Name
Email( not to be displayed)Privacy Policy
1+2=This is to prevent automatic submission by spammers. Please enter the result of the sum as asked

Form Validation in JavaScript
Checkbox Validation of a form



HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

©2000-2014 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer