Listbox options javascript select all,move left-right, move up-down
- By Viral Patel on June 15, 2009
While working with Listboxes I had to write few small JavaScript snippets to perform certain tasks like selecting all options / seselecting all options or moving options up and down or swapping the options between two listboxes. I thought of sharing the JavaScript functions with you so that you can bookmark the article and use the code whenever you need them.
Listbox Select All / Deselect All JavaScript
Following is the JavaScript function for implementing select all, deselect all options in listbox.
function listbox_selectall(listID, isSelect) {
var listbox = document.getElementById(listID);
for(var count=0; count < listbox.options.length; count++) {
listbox.options[count].selected = isSelect;
}
}
The above javascript code is very straight forward. All you have to do it to pass the ID of listbox you need to perform select all/deselect all and a boolean value for select/deselect.
For example if a listbox has an id “countryList” following can be the function call.
listbox_selectall('countryList', true); //select all the options
listbox_selectall('countryList', false); //deselect all the options
Listbox Move up/down options JavaScript
Following is the javascript function that you can use to add move up/down options functionality. User can select any option and move it up in the list or down.
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;
}
Thus, you can call this function with first argument as list id and second argument a string value ‘up’ or ‘down’ depending on where you want to move the selected option.
listbox_move('countryList', 'up'); //move up the selected option
listbox_move('countryList', 'down'); //move down the selected option
Listbox swap/move left-right options JavaScript
Following is the javascript code for moving selected options from one listbox to another.
function listbox_moveacross(sourceID, destID) {
var src = document.getElementById(sourceID);
var dest = document.getElementById(destID);
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);
}catch(error) {
dest.add(newOption); // IE only
src.remove(count);
}
count--;
}
}
}
Just call the function with two arguments, first is the source listbox id and second is the destination listbox id.
listbox_moveacross('countryList', 'selectedCountryList');
Online Demo
Get our Articles via Email. Enter your email address.
Thanks a lot.
How can i get right side list when i submit
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
when i am trying it is giving me error as The function add(___newOption0, null) is undefined for the type Element
Gracias… no sabes del lio en que me sacaste…. te lo agradezco mucho.
Thanks for the script, it helped me in right time to finish the project.
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; } }Nice article..
May be this wil help full but i need add,remove, add all, and remove all otion i the list
Thank you very much just what i needed
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.
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.
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.
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
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
Hi there,
Thanks so much for this script. You saved a lot of my time.thanks again.
all the best
I used some other code for this in the past. But this is the best one with a very clean design.
Thanks.
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.
thank you for thr fabulous code .
thanks… simple amazing…
save my time to code it.
Superb Solution. The one thing i am only confused is what is
“listbox_moveacross('s', 'd')”
“listbox_moveacross('d', 's')
“'s', 'd'″
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.
@vissu – See if your HTML page has select boxes with the appropriate IDs. It could be the only reason why getElementById method is unable to retrieve a DOM object.
How can i add limitation from right to left ? Please send me the solution.
@Ashraf: To add list items from right selectbox to left all you need to do is to call function listbox_moveacross() with argument first right listbox id and then left listbox id.
e.g
Hope that works.
It’s nice. Thanks!!!