List Box Manipulation using jQuery

Working on listbox I assume that jquery is very simple to move data from one list box to another. Yes I implemented it.
Here I implemented on submit button and on double click on object. To implement this first include jquery to simple html page

<script type="text/javascript" src="jquery.js" charset="utf-8"></script>

Suppose you have two list boxes in an html table having some values and two button to move data from listbox first to another a list box and two buttons are like:

<select id="firstList" multiple="multiple" style="height:420px;width: 250px;" >
<option value="1">PHP</option>
<option value="2">.Net</option>
<option value="4">Paste</option>
<option value="5">Pea</option>
<option value="6">Pamp</option>
<input id="to2" type="button" name="to2"  title='assign' value=">" /><br/><br/>
<input id="to1" type="button" name="to1" title='unassign' value="<">
<select id="secondList" multiple="multiple" style="height:420px;width: 250px;" ></select>

All is the game of jquery functioning how we can obtained to move data from one list box to another.
Create two functions in assignList and unassignList like

// function: UnAssignment
function assignList()
// loop through first listbox and append to second listbox
$('#firstList :selected').each(function(i, selected){
// append to second list box
$('#secondList').append('<option value="'+selected.value+'">'+ selected.text+'</option>');
// remove from first list box
$("#firstList option[value='"+ selected.value +"']").remove();
// function: UnAssignment
function unassignList()
// loop through second listbox and append to first listbox
$('#secondList :selected').each(function(i, selected){
// append to first list box
$('#firstList').append('<option value="'+selected.value+'">'+ selected.text+'</option>');
// remove from second list box
$("#secondList option[value='"+ selected.value +"']").remove();

To make this functioning add jquery button and double click event to button and object itself.

$('#firstList').dblclick(function() {

$('#secondList').dblclick(function() {



As we now one important thing to notice if list box is full of values and we have to search any particular value so it is difficult to search whole list box, for searching through list box take a text box and below how this function searchFirstList filter
No for this I have a textbox to filter
<input id=”firstFilterSearch” type=”text”>

// Function for Filtering
function searchFirstList(inputVal, searchArea)
var allCells = $(searchArea).find(‘option’);
if(allCells.length > 0)
var found = false;
allCells.each(function(index, option)
var regExp = new RegExp(inputVal, ‘i’);

Calling this function

var searchArea = $('#firstList'); // Select Box ID
searchFirstList($(this).val(), searchArea);

Here is example EXAMPLE

9 Responses to List Box Manipulation using jQuery

  1. Júnior says:

    The search does not work.

  2. Júnior says:

    Yes, it worked in Mozila.
    Thanks for the code.
    I will try one soluction for other browser. (Ex: i.e).

  3. Hitesh Prajapati says:

    Not work in ie. Please provide me proper solution. Thanks…

  4. Sneha Tonde says:

    Thanks for the code.It do work.

  5. I’m more than happy to uncover this site. I wanted to thank you for your time just for this fantastic read!! I definitely liked every little bit of it and i also have you book-marked to check out new information in your site.

  6. Genius says:

    Nice and useful post!


  7. Sneha says:

    Thank u for the code

Leave a Reply

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