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

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

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>

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.



63 Comments

  • Praveen 10 December, 2013, 15:24

    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 23 January, 2014, 4:26

    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>
    
    • Deepak 15 July, 2014, 15:45

      Thanks for the code. It works fine on IE9, however it doesn’t work on IE11.
      Use case:
      1. Select any option
      2. Move up or down
      3. Try selecting other option in same box, you will not be able to select other option.

      I am facing similar issue while migrating to IE11. Please help! Thanks in advance.

    • Deepak 16 July, 2014, 10:30

      The code snippet which Ron has posted doesn’t work on IE11. Can someone please reply with the fix. I am facing similar issue while migrating to IE11.

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

      Any help would be appreciated. Thanks.

  • Mojgan 30 January, 2014, 10:06

    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
    mojgan.nemati@uhn.ca

  • Radhika 21 May, 2014, 19:35

    Hi Viral

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

  • F. Paepke 18 June, 2014, 18:39

    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&lt;listbox.options.length;count++)
    		{
    			listbox_move(&#039;a&#039;, &#039;up&#039;);
    		}
    	}
    }
    

Leave a Reply

Your email address will not be published. Required fields are marked *

Note

To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]

Current day month ye@r *