How to add an item from one ListBox to another ListBox on button click event using javascript?
In this Article I am going to explain you how to transfer selecetd Item from one ListBox to another ListBox using JavaScript. Here I have taken two ListBoxes, I added Some Items in first ListBox. When the user selects an Item from first ListBox it will be added to second ListBox.
First we have to add some Items in First ListBox. Add 4 Buttons for Add, Select All, Remove, Remove All on aspx page.
javascript coding:
Code for Select Single Item to send:
function SelectSingleItem() {
//debugger;
var SelectedItemIndex = document.getElementById('lstbox1').selectedIndex;
if (SelectedItemIndex == -1) {
alert("Please Select the item to move");
return false;
}
var SelectedItemValue = document.getElementById('lstbox1').options.value;
var GetItemIndex = document.getElementById('lstbox2').options.length;
document.getElementById('lstbox2').options[GetItemIndex] = new Option(SelectedItemValue, SelectedItemValue);
document.getElementById('lstbox1').options[SelectedItemIndex] = null;
return false;
}
Code for Select Multiple Item to send:
function SelectMultipleItem() {
//debugger;
var SelectedItemIndex = document.getElementById('lstbox1').selectedIndex;
var i;
for (i = 0; i < document.getElementById('lstbox1').options.length; i++) {
var SelectedItemValue = document.getElementById('lstbox1').options[i].value;
var GetItemIndex = document.getElementById('lstbox2').options.length;
document.getElementById('lstbox2').options[GetItemIndex] = new Option(SelectedItemValue, SelectedItemValue);
}
for (i = document.getElementById('lstbox1').options.length - 1; i >= 0; i--) {
document.getElementById('lstbox1').options[i] = null;
}
return false;
}
Code for Remove Single Item From Second Listbox:
function SelectSingleItemRemove() {
//debugger;
var SelectedItemIndex = document.getElementById('lstbox2').selectedIndex;
if (SelectedItemIndex == -1) {
alert("Please Select the item to Remove");
return false;
}
var SelectedItemValue = document.getElementById('lstbox2').options.value;
var GetItemIndex = document.getElementById('lstbox1').options.length;
document.getElementById('lstbox1').options[GetItemIndex] = new Option(SelectedItemValue, SelectedItemValue);
document.getElementById('lstbox2').options[SelectedItemIndex] = null;
return false;
}
Code for Remove All the Item From Second Listbox:
function SelectMultipleItemRemove() {
//debugger;
var SelectedItemIndex = document.getElementById('lstbox2').selectedIndex;
var i;
for (i = 0; i < document.getElementById('lstbox2').options.length; i++) {
var SelectedItemValue = document.getElementById('lstbox2').options[i].value;
var GetItemIndex = document.getElementById('lstbox1').options.length;
document.getElementById('lstbox1').options[GetItemIndex] = new Option(SelectedItemValue, SelectedItemValue);
}
for (i = document.getElementById('lstbox2').options.length - 1; i >= 0; i--) {
document.getElementById('lstbox2').options[i] = null;
}
return false;
}
And Call the above Javascript in aspx page.
i have Called the above script in button onclientClick event
OnClientClick="return SelectSingleItem()"
OnClientClick="return SelectMultipleItem()"
OnClientClick="return SelectSingleItemRemove()"
OnClientClick="return SelectMultipleItemRemove()"
I hope this article will help you to know "How to add an item from one list box to another listbox using javascript in ASP.NET.
Thanks for reading my Article "How to add an item from one ListBox to another listbox using javascript in ASP.NET."
If you have any query or you have any suggestion, please let me know. I will appreciate your valuable feedback.
Thank You Readers,
Rathin.
Reference: Rathin813.blogspot.com