ViralPatel.net

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;
 }
}
Code language: JavaScript (javascript)

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
Code language: JavaScript (javascript)

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;
}
Code language: JavaScript (javascript)

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
Code language: JavaScript (javascript)

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--;
  }
 }
}
Code language: JavaScript (javascript)

Just call the function with two arguments, first is the source listbox id and second is the destination listbox id.

listbox_moveacross('countryList', 'selectedCountryList');
Code language: JavaScript (javascript)

Online Demo

Click here for the online demo.

Getting Values in Server side script

When you submit the form with Listbox, by default browser will submit only selected values from that selectbox. Thus if you want to submit values from right hand side select box, you first needs to select all those before form gets submitted. You can do this like below:

<script>
function submit() {
     listbox_selectall('righthand_side_listbox_id', true);
     return true;
}

<form onsubmit="return submit()">
...
</form>
Code language: JavaScript (javascript)

This would select all the options before form gets submitted. Now you can retrieve options in your server side script from request as request parameter.