In my project, I want to implement code where I need to keep two list box(asp control), and I want to implement add remove like functionality between these two list box that is removing one item from list box should be added to another and removing from another should be added to first.
How can I use JavaScript to achieve this effect? Any links to tutorials would also be helpful. Thanks in advance.
If you have some HTML like this:
<select id="listBox1" size="5">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
<select id="listBox2" size="5">
<option value="4">Item 4</option>
<option value="5">Item 5</option>
<option value="6">Item 6</option>
</select>
<a href="#" id="moveLink">Move selected from list 1 to list 2</a>
Then the following jquery would take the selected items from list 1 and move them to list 2 when the moveLink is clicked.
$(function() {
$('#moveLink').click(function() {
$('#listBox1 option:selected').each(function(i, opt) {
$('#listBox2').append($('<option></option>').attr('value', opt.val()).text(opt.text());
$(opt).remove();
});
});
});
Go to www.jquery.com to get the library to include in the page as well for this to work.
You can use the source code I've provided here, which is copied from http://www.johnwbartlett.com/CF_tipsNtricks/index.cfm?TopicID=86
<html>
<head>
<title>Multi-list copy example</title>
<body>
<script language="Javascript">
function SelectMoveRows(SS1,SS2)
{
var SelID='';
var SelText='';
// Move rows from SS1 to SS2 from bottom to top
for (i=SS1.options.length - 1; i>=0; i--)
{
if (SS1.options[i].selected == true)
{
SelID=SS1.options[i].value;
SelText=SS1.options[i].text;
var newRow = new Option(SelText,SelID);
SS2.options[SS2.length]=newRow;
SS1.options[i]=null;
}
}
SelectSort(SS2);
}
function SelectSort(SelList)
{
var ID='';
var Text='';
for (x=0; x < SelList.length - 1; x++)
{
for (y=x + 1; y < SelList.length; y++)
{
if (SelList[x].text > SelList[y].text)
{
// Swap rows
ID=SelList[x].value;
Text=SelList[x].text;
SelList[x].value=SelList[y].value;
SelList[x].text=SelList[y].text;
SelList[y].value=ID;
SelList[y].text=Text;
}
}
}
}
</script>
<form name="Example">
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td>
<select name="Features" size="9" MULTIPLE>
<option value="2">Row 2</option>
<option value="4">Row 4</option>
<option value="5">Row 5</option>
<option value="6">Row 6</option>
<option value="7">Row 7</option>
<option value="8">Row 8</option>
<option value="9">Row 9</option>
</select>
</td>
<td align="center" valign="middle">
<input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(document.Example.Features,document.Example.FeatureCodes)"><br>
<br>
<input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(document.Example.FeatureCodes,document.Example.Features)">
</td>
<td>
<select name="FeatureCodes" size="9" MULTIPLE>
<option value="1">Row 1</option>
<option value="3">Row 3</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
This might be what you need: http://www.dotnetspider.com/resources/21388-Add-Remove-from-one-Listbox-another-ListBox.aspx