Press "Enter" to skip to content

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

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

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:

[html]
<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>
</select>
<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>
[/html]

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

[javascript]
// 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();
});
}

[/javascript]

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

[javascript]
$(document).ready(function(){
$(‘#firstList’).dblclick(function() {
assignList();
});

$(‘#secondList’).dblclick(function() {
unassignList();
});

$(‘#to2’).click(function()
{
assignList();
});

$(‘#to1’).click(function()
{
unassignList();
});
});
[/javascript]

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”>

[javascript][/javascript]

// 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’);
if(regExp.test($(option).text()))
$(option).show();
else
$(option).hide();
});
}
}
[/javascript]

Calling this function

[javascript]

$(‘#firstFilterSearch’).keyup(function()
{
var searchArea = $(‘#firstList’); // Select Box ID
searchFirstList($(this).val(), searchArea);
});
[/javascript]

Here is example EXAMPLE

9 Comments

  1. Júnior
    Júnior May 17, 2011

    The search does not work.

  2. Júnior
    Júnior May 17, 2011

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

  3. Hitesh Prajapati
    Hitesh Prajapati July 11, 2011

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

  4. Sneha Tonde
    Sneha Tonde April 9, 2012

    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
    Genius September 23, 2014

    Nice and useful post!

    Thanks

  7. Sneha
    Sneha November 2, 2015

    Thank u for the code

Leave a Reply to Genius Cancel reply

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