Listbox options javascript select all,move left-right, move up-down

mangesh says:

Thanks a lot.

agniraj says:

How can i get right side list when i submit

Vivekanand says:

Nice article, I am searching for the same using jQuery….

And coming to the question which Agniraj has mentioned, Agniraj here is your answer, just check out the length of right list box and loop through the options, you will get all the options which are there in right list box.

Hope this might :)

Thanks,
Vivek

Ivan says:

Gracias… no sabes del lio en que me sacaste…. te lo agradezco mucho.

Bhoobala Krishnan B says:

Thanks for the script, it helped me in right time to finish the project.

basty_dread says:

Please email me on how could i select all the values on the listbox if my listbox name is like this

this is my javascript for selecting all the listbox items:

function selectall()
{
for(i=0;i<document.forms['frmcustom'].sections[].length;i++){
document.forms['frmcustom'].sections[i].selected=true;     
}
} 

amit says:

Nice article..

Rohit says:

May be this wil help full but i need add,remove, add all, and remove all otion i the list

Omer says:

Thank you very much just what i needed

darla says:

I noticed a few things while implementing this in PHP I’d like to share:

1) If you provide a name property to the destination list box, the “name=” property has to be appended with ‘[]’ at the end, to return an array of items, otherwise it only returns the first item in the destination list box. For example

Use: …
Not: …

2) In the script function “listbox_moveacross(sourceID, destID)”, the value of src.options.length needs to reflect the current sizeof src.options.length thru each iteration. In my implementation, I captured src.options.length into a local var ahead of the loop, in hopes of gaining some tick ecomony.

So I did:
var maxx = src.options.length;
for(var count=0; count < maxx; count++)
{
…
}

versus the example:
for(var count=0; count < src.options.length; count++)
{
…
}

I found out the hard way, I had to decrement var maxx along with the var count– decrement. So the code line after count–; became maxx–;

if(src.options[count].selected == true)
{
…
count–;
maxx–;
}

Just a lesson learned.

Saravanan says:

Hi ,
This code work fine in browsers except IE6.
Let me explain. There is a bug that an empty entry is displayed if you do that following:-
1. On the Online demo section, in the two list boxes on the right, select all the values from the extreme right listbox and move them to the left Listbox.
2. You would see that a scroll bar is displyed.
3. select say ‘Bhutan’ and scroll down until the selected ‘Bhutan’ is not visible.
4. Click on the right arrows to move the value to the Extreme right Listbox.
5. You would see a blank value in the Left Listbox when ‘Bhutan’ was originally there.
6. Click on the Blank value and the value just below it is written on the blank giving duplicate values to the listbox.
7. If you go on selecting the countries in the list, you would notice that all the value at the current position in the list would take the value of the next position and so on and os forth.

I am experiencing the same in my code as well. It would be helpful if somebody could give pointers to resolve this issue.

Victor says:

Hi, great script.

Does anyone know of a similar script that can handle images? What I want is for the user to be able to choose image priority that will later be displayed in an image scroller. Since option values dont allow for image tags my question is if something simliar to the above can be done perhaps with divs or something? Any help or suggestions are greatly appreciated.

Tx,
Victor.

Ashwini says:

Hi….
Does anyone know how to delete multiple checked options using struts?I am able to delete single checked option.If i check multiple boxes,it deletes only 1.Any help or suggestions are greatly appreciated.
Thanks,
Ashwini

emre says:

Hi,

Thank you very for script.i think it s awesome..I have checked the script in ie,firefox and chrome and i have not got errors. but when i have checked in opera 10.54, i came across an error..For example when you select items more than one and click move across button you will see just the first item is swapped so the others are not swapped..how can i fix this problem..

thanks for your help
Best Regards

Nishant says:

Hi there,

Thanks so much for this script. You saved a lot of my time.thanks again.

all the best :)

tinh.khau says:

I used some other code for this in the past. But this is the best one with a very clean design.
Thanks.

Ishfaq says:

As i feel there is an enhancement required.
On the double click event on any item from one select box it should be automatically passed to the other select box or vice versa.

Ritam Atarthy says:

thank you for thr fabulous code .

jepoy says:

thanks… simple amazing…
save my time to code it.

Dhananjay says:

Superb Solution. The one thing i am only confused is what is

“listbox_moveacross('s', 'd')”

“listbox_moveacross('d', 's')

“'s', 'd&#39”

vissu says:

var listbox = document.getElementById(listID);
var src = document.getElementById(sourceID);
var dest = document.getElementById(destID);

getting listbox , src ,dest null, although listID,sourceID,destID getting values.

Ashraf says:

How can i add limitation from right to left ? Please send me the solution.

Selvi says:

It’s nice. Thanks!!!

zodehala says:

how can i get “selectedCountryList” value from php files

i can not get i t using following codes

foreach($_POST as $a => $b)
echo $a.” – “.$b.””;

mesmerina says:

how can i send data in right selectbox to php file

Abhi says:

This is very helpful. Thanks!

sith says:

This script runs correctly in google chrome ,but not in firefox !!!. Any solutions to solve this problem??

sridevi says:

can somebody help me how to save the data that is entered in the text boxes/checkboxex/radio button/listboxes in the html to excel sheet. I wanted to use these excel values to retrieve again from html to excel and vice versa.

Jhane says:

Could you help me on how i can move my record from one table to another using checkbox?..thank you for the big help

Jhane says:

I don’t know if I need these codes in order to move my record

$.ajax({
				url: "modules/delete-all.php",
				type:"get",
				async:false,
				data: "check"

thank you for the help/

AEG says:

Awesome code, but I am confused as to how:
var src = document.getElementById(sourceID);
var dest = document.getElementById(destID);
get associated when the tag ID’s are “s” and “d”.
I’m not making the connection?

Randi says:

Thanks patel… your articles was helped me

sri says:

Thanks Sir.

karthik says:

Hi Viralpatel,

In my webform i have taken two list boxes and two buttons to swap items from one list box to another list box.
listbox_moveacross(‘countryList’, ‘selectedCountryList’);can you please tell the event name to call this in listboxes.
i have used onclick event iam calling this function its working but i have swap items in in button click event can you please help me in which events i have to call this function listbox_moveacross(‘countryList’, ‘selectedCountryList’);

Thanks,
karthik

vamsi boppana says:

This code is working in my local browser, but once i depoy it in server started showing error:
“dest.add(newOption, null); //Standard”
Nice article but check this issue too.
this issue ate one day time of mine.

John says:

Firstly its a very good piece of code..kudos to the attempt.
But,I’m afraid to say that there is a logical error in the code..
we cannot move up or down 2 or more options at a time.Only the first selected option comes up.
If you can make it for the issue..will be very helpful…
Thank you in advance…. :)

Charlie Markwick says:

Really useful snippets. Thanks

Mallesh M says:

Nice Article, i was looking for the same and saved a lot of time.

Sipho M says:

Hi there

You saved me a couple of hours.
Great work, Keep it up

Milan M says:

Very nice Article, i was looking for the same.

Shruthi says:

Can you please send me the full html code for CountryList Selection…I am new to html so please help me with this..

Shruthi says:

Hi, Can you please tel me how to open QTP using javascript code…

Sandaruwan says:

Thanks! Very useful. did some changes and arranged according to my needs.

praveen kumar vk says:

Branch*

>>

<<

javascript function

function listbox_moveacross(sourceID, destID) {
 alert("calling");
    var src = document.getElementById(leftcombo);
    alert("src=="+src);
    var dest = document.getElementById(rightcombo);
    alert("dest=="+dest);
 
    for(var count=0; count < src.options.length; count++) {
 
        if(src.options[count].selected == true) {
                var option = src.options[count];
 
                var newOption = document.createElement("option");
                newOption.value = option.value;
                newOption.text = option.text;
                newOption.selected = true;
                try {
                         //dest.add(newOption, null); //Standard
                         //src.remove(count, null);
                         dest.add(newOption); //Standard
                         src.remove(count);
                 }catch(error) {
                         dest.add(newOption); // IE only
                         src.remove(count);
                 }
                count--;
        }
    }
}

Hi anyone can explain the problem in this code
i am geeting exception like my web page is getting expired while adding the values from first list box to next list box in IE8
any one please give me a solution with code

praveen says:

Hi
Any one please tell me how to avoid duplicate records while moving left combo box to right combo box in javascript?

praveen says:

Hi
Any one provide a solution to avoid duplicate records while moving records from left list box to right list box in javascript

Srihari says:

Your code saved a lot of time for me…
Keep up the good work..

Vinayak Ingulkar says:

For Listbox swap/move left-right options JavaScript
I am getting below error while adding the record to destination .
htmlfile:Invalid argument .

$("#SelectDataCarrier").click(function () {
        var src = document.getElementById("ava_datacarrier");
        var dest = document.getElementById("select_datacarrier");
        for (var count = 0; count < src.options.length; count++)
        {
            if (src.options[count].selected == true)
            {
                var option = src.options[count];                   
                var newOption = document.createElement("option1");  
                newOption.value = option.value;                
                newOption.text = option.text;                 
                //newOption.selected = true;                
                try 
                {
                     
                    dest.add(newOption, null); //Standard                         
                    src.remove(count, null);                  
                }catch(error) 
                {                          
                    dest.add(newOption); // IE only                         
                    src.remove(count);
                }
                count--;
            }
        }         
    });

@using Kendo.Mvc.UI.Fluent
@using Kendo.Mvc.Resources
@model  ApplicationManagement.Web.Models.ApplicationDataCarrierViewModel  

@{
    Layout = "";
}

    @*Data Carrier*@ 
            
        
            
             @*  @(Html.Kendo().MultiSelect()
                        .Name("required1")
                        .Placeholder("Select DataCarrier...")
                        .BindTo(listItemsCat0)
                        .Height(300)
                        )    *@


               @*   @(Html.Kendo().MultiSelect()
                        .Name("optional1")
                        .Placeholder("Selected DataCarrier...")
                        .BindTo(listItemsCat1)
                        .Value(listItemsCat1)
                        .Height(300)

                        )  *@   
                Data-Carrier Available                 
                @{                    
                        var listItemsCat0 = new List();
                        foreach (var datacarrier in Model.DataCarriers)
                        {
                            listItemsCat0.Add(new SelectListItem { Text = datacarrier.Description, Value = (string)datacarrier.DataCarrierId.ToString() });
                        }                       
                         @(Html.ListBox("ava_datacarrier",  listItemsCat0,new {@style = "width:200px; "}))                                
                    }                 
               

             
              
             
             
             
             
                 >>> 
             
             
                 <<<
             
             
             
             
             
            
                Data-Carrier Selected                             
                @{              
                    var listItemsCat1 = new List();
                    //
                    foreach (var appdatacarrier in Model.ApplicationDataCarriers)
                    {
                        //listItemsCat1.Add(new SelectListItem { Text = datacarrier.Description, Value = (string)datacarrier.DataCarrierId.ToString() });
                          listItemsCat1.Add(new SelectListItem { Text = appdatacarrier.DataCarrier.Description, Value = (string)appdatacarrier.DataCarrier.DataCarrierId.ToString() });
                    }
                         @(Html.ListBox("select_datacarrier", listItemsCat1 ,new {@style = "width: 200px;"   }))                  
                }              
               
                            
                 @Html.Hidden("Appid", Model.ApplicatationID)   
                   @{              
                    var listItemsCat2 = new List();                
                   listItemsCat2.Add(new SelectListItem { Text = "-1", Value = "-1" });
                     
                         @(Html.ListBox("delete_datacarrier", listItemsCat2,new {@style = "width: 20px; display : none;"}))                  
                }                
                                   
        
        
            
                Save
                           
        
        
            

Vimal Kanzariya says:

Thank you, Thank you, Thank you, Thank you very much…

Allie says:

here is my code but that move all time main category loop forward

function selectItems(fromID,toID)
{
var from = document.getElementById(fromID);
var to = document.getElementById(toID);

if(from.selectedIndex == -1)
{
return (false);

}
//if(parentNode.label == selectedIndex )

for(var i=0; i = 0; i–)
{
var o=from.options[i];
if(o.selected)
{
from.options[i]=null;
}
}
from.selectedIndex=-1;
to.selectedIndex=-1;

}

function find(val,idx) {
var sel=document.getElementById(‘lstboxItems’);

var s=val+’ : ‘+sel.options[idx].parentNode.label;
//alert(s.label);
}

<?php
/*$fisrstlbox=$_POST['lstboxItems'];
$secondlbox=$_POST['lstboxSelectedItems'];*/

$str2="Select * from list_task where pid=0";
$res2=mysql_query($str2) or die(mysql_error());
if($res2)
{
while($row=mysql_fetch_row($res2))
{
echo "”;
$str3=”select * from list_task where pid='”.$row[0].”‘”;
$res3=mysql_query($str3) or die(mysql_error());
while($row2=mysql_fetch_row($res3))
{
echo “$row2[2]”;
}

}
echo “”;

}

Praveen says:

How to move all values in one button click? I tried calling the add function in select all function but it didnt work. I need add all and remove all buttons along with these functionality. Kindly help!

Ron says:

Very nice code and clever ideas.
Here is a variation (just for the heck of it)

<HTML>
<HEAD>
	<STYLE type="text/css">

	body { font-family:Arial; }
	a { color:#00f; text-decoration:none; }

	</STYLE>

	<SCRIPT type="text/javascript">
	
	function listbox_move(listID,direction){
	var listbox=document.getElementById(listID);
	var selIndex=listbox.selectedIndex;
	if(-1==selIndex){alert("Please select an option to move.");return;}
	var increment=-1;
	if(direction=='up')
		increment=-1;
	else
		increment=1;
	if((selIndex+increment)<0||(selIndex+increment)>(listbox.options.length-1)){return;}
	
	var selValue=listbox.options[selIndex].value;
	var selText=listbox.options[selIndex].text;
	listbox.options[selIndex].value=listbox.options[selIndex+increment].value;
	listbox.options[selIndex].text=listbox.options[selIndex+increment].text;
	listbox.options[selIndex+increment].value=selValue;
	listbox.options[selIndex+increment].text=selText;
	listbox.selectedIndex=selIndex+increment;
	}


	function listbox_moveacross(sourceID,destID){
	var src=document.getElementById(sourceID);
	var dest=document.getElementById(destID);
	
	var picked1 = false;
	for(var count=0;count<src.options.length;count++){
		if(src.options[count].selected==true){picked1=true;}
	}

	if(picked1==false){alert("Please select an option to move.");return;}

	for(var count=0;count<src.options.length;count++){
		if(src.options[count].selected==true){var option=src.options[count];
			var newOption=document.createElement("option");
			newOption.value=option.value;
			newOption.text=option.text;
			newOption.selected=true;
			try{dest.add(newOption,null);
			src.remove(count,null);
		}
			catch(error){dest.add(newOption);src.remove(count);
		}
		count--;
		}
	}}

	function listbox_selectall(listID,isSelect){
		var listbox=document.getElementById(listID);
		for(var count=0;count<listbox.options.length;count++){
			listbox.options[count].selected=isSelect;
			}
	}

	</SCRIPT>

	<TITLE>Listbox JavaScript functions</TITLE>

</HEAD>

<BODY>


<table border="1" align="center" style="border-collapse:collapse;">
<tr>
<td colspan="5" align="center"><font size="+2"><b>Listbox Functions</b></font></td>
</tr>
<tr valign="top">
<th>Move up/down</th>
<td></td>
<th colspan="3">Move left/right</th>
</tr>
<tr valign="top">
<td>
<SELECT id="a" size="10" multiple>
	<OPTION value="a">Afghanistan</OPTION>
	<OPTION value="b">Bahamas</OPTION>
	<OPTION value="c">Barbados</OPTION>
	<OPTION value="d">Belgium</OPTION>
	<OPTION value="e">Bhutan</OPTION>
	<OPTION value="f">China</OPTION>
	<OPTION value="g">Croatia</OPTION>
	<OPTION value="h">Denmark</OPTION>
	<OPTION value="i">France</OPTION>
	<OPTION value="j">Canada</OPTION>
</SELECT>


</td>
<td>&nbsp;&nbsp;&nbsp;</td>
<td>
<SELECT id="s" size="10" multiple>
	<OPTION value="a">Afghanistan</OPTION>
	<OPTION value="b">Bahamas</OPTION>
	<OPTION value="c">Barbados</OPTION>
	<OPTION value="d">Belgium</OPTION>
	<OPTION value="e">Bhutan</OPTION>
	<OPTION value="f">China</OPTION>
	<OPTION value="g">Croatia</OPTION>
	<OPTION value="h">Denmark</OPTION>
	<OPTION value="i">France</OPTION>
	<OPTION value="j">Canada</OPTION>
</SELECT>


</td>
<td valign="middle">
<a href="#" onclick="listbox_moveacross('s', 'd')">►</a>
<br/>
<a href="#" onclick="listbox_moveacross('d', 's')">◄</a>
</td>
<td>
<SELECT id="d" size="10" multiple>
	<OPTION value="a">Albania</OPTION>
	<OPTION value="b">Bohemia</OPTION>
	<OPTION value="c">Brazil</OPTION>
	<OPTION value="d">Bhutan</OPTION>
	<OPTION value="e">Bolivia</OPTION>
	<OPTION value="f">Chile</OPTION>
	<OPTION value="g">Cuba</OPTION>
	<OPTION value="h">Djibouti</OPTION>
	<OPTION value="i">Finland</OPTION>
	<OPTION value="j">Greece</OPTION>
</SELECT>


</td>
</tr>

<tr>
<td>
Move <a href="#" onclick="listbox_move('a', 'up')">▲ up</a>,
<a href="#" onclick="listbox_move('a', 'down')">▼ dn</a>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>

<tr>
<td>
Select
<a href="#" onclick="listbox_selectall('a', true)">all</a>,
<a href="#" onclick="listbox_selectall('a', false)">none</a>
</td>
<td>
</td>
<td>
Select
<a href="#" onclick="listbox_selectall('s', true)">all</a>,
<a href="#" onclick="listbox_selectall('s', false)">none</a>
</td>
<td>
</td>
<td>

Select
<a href="#" onclick="listbox_selectall('d', true)">all</a>,
<a href="#" onclick="listbox_selectall('d', false)">none</a>

</td>
</tr>

</table>

</BODY>
</HTML>

Mojgan says:

Hi everyone,

This is a great script! Does anyone have a fix for IE7 and IE6? I am getting JavaScript error and this is rather urgent.

Much appreciated,
Mojgan Nemati
[email protected]

Radhika says:

Hi Viral

Can you help me the same logic to be inserted as a javascript in cognos report

F. Paepke says:

Hi,
I have a lot of items in my listbox and so I added a link ‘TOP’ that uses your up-function to place the selected item to the top of the listbox

function listbox_move(listID,direction)
{
	var listbox=document.getElementById(listID);
	var selIndex=listbox.selectedIndex;
	if(-1==selIndex)
	{
		alert("Please select an option to move.");
		return;
	}
	var increment=-1;
	if(direction=='up')
	{
		increment=-1;
	}
	if(direction=='down')
	{
		increment=1;
	}

	if((selIndex+increment)(listbox.options.length-1)){return;}

	var selValue=listbox.options[selIndex].value;
	var selText=listbox.options[selIndex].text;

	if(direction=='up' || direction=='down')
	{
	listbox.options[selIndex].value=listbox.options[selIndex+increment].value;
	listbox.options[selIndex].text=listbox.options[selIndex+increment].text;
	listbox.options[selIndex+increment].value=selValue;
	listbox.options[selIndex+increment].text=selText;
	listbox.selectedIndex=selIndex+increment;
	}
	if(direction=='top')
	{
		for(var count=0;count<listbox.options.length;count++)
		{
			listbox_move('a', 'up');
		}
	}
}

Toba says:

so how do you submit selected items to database

Luis Rodriguez says:

hola no me funciona el selected index , no hay forma de que despues de llenar el list box se me marque el primer item , solo si voy con el mouse , pero en automatico no hay vida , nada de lo que esta publicado en internet sirve , quizas le sirva a otros porque tendran alguna magia que no han publicado o algun truco que no quieren decir

PKT says:

Up and Down listbox got hanged in IE11 after up and down item very fast (Can’t select any item manually in first lsitbox in your demo). Any idea how to resolve

Justel says:

A Move Version that works:

function listbox_move(listID,direction)
{
	var listbox=document.getElementById(listID);
	var iLstL=listbox.length, iSelIndO=listbox.selectedIndex, iSelIndN=iSelIndO+((direction=="Up")?-1:1);
	if(iLstL<1 || iSelIndO==-1 || iSelIndN < 0 || iSelIndN > (iLstL-1)) return;
	var oIsSel = listbox.options[iSelIndO].cloneNode(true);
	listbox.options[iSelIndO] = listbox.options[iSelIndN].cloneNode(true);
	listbox.options[iSelIndN] = oIsSel.cloneNode(true);
	listbox.options[iSelIndN].selected = true;
}

Aishy says:

Very useful article. Thanx a lot.
I’m doing a HTML/javascript project and there’s a list box called ‘newlist’.
list box items are coming from the database.
Can you please let me know, how can I delete only the first item and the last item from this list box?
Thanx.

kiruthiga says:

Hi,
In IE11:
1. Select any one option and move up or down very fastly.
2. Select other option to move, however the option can’t be selected

Solution:
Add the below code in move up and down function
listbox.multiple=false;
setTimeout(function(){listbox.multiple=true},0);

Divya says:

Thanks for the solution

Mahadev says:

Hi,

I am new to javascript. i have created one page using php and javascript. my requirement is i have a csv file, it’s having bunch of name and mail id’s. for eg:

cat list.csv.
name1,[email protected]
name2,[email protected]
name3, [email protected]
…..

in my php page having 4 fields,
company code
employee id
name
mailid

In “name” field I can display the first field of csv contents as it’s having name. (please note that name field is a multiselect drop down box). If I select “name1” immideately name1 mail id ([email protected]) should appear in “mailid” column without any submit button. If I select both “name1” and “name2” immediately [email protected] and [email protected] mailid’s should appear in “mailid” field.

I used “relaod(this.form)” option for name field, but it will be reload the page immediately once I select single name. it’s not allowing me to select multiple names.

I used “relaod(this)” option for name field, only name values I can get after rload the page “company code” and “employee id” values will be disappear.

Could anyone please help me on this.

Thanks in advance,

Br,
Mahadev

Jimmy says:

Great code! Thanks for posting. In the move across code, is there a way place the item on the TOP of the list instead of the bottom?

Jimmy says:

Answered my own question, just needed to set the dest.add newOption to 0 and not null.

Sajeev M V says:

Thank you for the code. Superb

Mohankumar says:

Hi,

With the single list, if I select a value and click on up/down, the selected element is getting moved but getting freezes in Internet Explorer. Hence, not able to select another element in the list. Can you pls resolve and let us know??

Ankit Bikers says:

Can I create a kind of list on which If I click on any item (in the left list) it automatically moves to right side?
If I click on any item (in the Right list) it automatically moves to Left side?