Listbox Move Up Down Right Left Delete Item value show / select all check list items in asp.net controls using jquery js sample demo code:
This jquery/js will perform the following function (not by using javascript method)...
1. Move list items between two listbox with multiple move option
2. Delete List Item / multiple list items.
3. Move list items up and down (multiple)
4. Seletet / read all list items. (option to show selected list items is commented in jquery js code)
Script sample demo code
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script><script type="text/javascript">
$(function() {
$("#MoveRight,#MoveLeft").click(function(event) {
var id = $(event.target).attr("id");
var selectFrom = id == "MoveRight" ? "#from" : "#to";
var moveTo = id == "MoveRight" ? "#to" : "#from";
var selectedItems = $(selectFrom + " :selected").toArray();
$(moveTo).append(selectedItems);
selectedItems.remove;
});
});
//function moveUp() {
$(function() {
$("#MoveUp").click(function(event) {
$('#to :selected').each(function(i, selected) {
if (!$(this).prev().length) return false;
$(this).insertBefore($(this).prev());
});
$('#to select').focus().blur();
});
});
//function moveDown() {
$(function() {
$("#MoveDown").click(function(event) {
$($('#to :selected').get().reverse()).each(function(i, selected) {
if (!$(this).next().length) return false;
$(this).insertAfter($(this).next());
});
$('#to select').focus().blur();
});
});
$(function() {
$("#ReadAll").click(function(event) {
$('#to option').each(function(index) {
// if ( ($(this).is(':selected')) {
// // do stuff if selected
// }
// else {
// // this one isn't selected, do other stuff
// }
alert($(this).val()+'--' + $(this).text());
});
});
});
$(function() {
$("#Delete").click(function(event) {
$('#to :selected').each(function(i, selected) {
$(this).remove();
alert('Selected item deleted');
$('#to').focus().blur();
});
});
});
</script>
HTML APSX Source code
<div>
<asp:ListBox ID="from" runat="server" SelectionMode="Multiple">
<asp:ListItem Value="f1">frm list 1</asp:ListItem>
<asp:ListItem Value="f2">frm list 2</asp:ListItem>
<asp:ListItem Value="f3">frm list 3</asp:ListItem>
<asp:ListItem Value="f4">frm list 4</asp:ListItem>
<asp:ListItem Value="f5">frm list 5</asp:ListItem>
</asp:ListBox>
<input id="MoveRight" type="button" value=" >> " />
<input id="MoveLeft" type="button" value=" << " />
<input id="MoveUp" type="button" value=" UP " />
<input id="MoveDown" type="button" value=" Down " />
<input id="Delete" type="button" value=" Delete Item " />
<input id="ReadAll" type="button" value=" Read All " />
<asp:ListBox ID="to" runat="server" SelectionMode="Multiple">
<asp:ListItem Value="to1">to list 1</asp:ListItem>
<asp:ListItem Value="to2">to list 2</asp:ListItem>
<asp:ListItem Value="to3">to list 3</asp:ListItem>
<asp:ListItem Value="to4">to list 4</asp:ListItem>
<asp:ListItem Value="to5">to list 5</asp:ListItem>
</asp:ListBox>
</div>
<asp:ListBox ID="from" runat="server" SelectionMode="Multiple">
<asp:ListItem Value="f1">frm list 1</asp:ListItem>
<asp:ListItem Value="f2">frm list 2</asp:ListItem>
<asp:ListItem Value="f3">frm list 3</asp:ListItem>
<asp:ListItem Value="f4">frm list 4</asp:ListItem>
<asp:ListItem Value="f5">frm list 5</asp:ListItem>
</asp:ListBox>
<input id="MoveRight" type="button" value=" >> " />
<input id="MoveLeft" type="button" value=" << " />
<input id="MoveUp" type="button" value=" UP " />
<input id="MoveDown" type="button" value=" Down " />
<input id="Delete" type="button" value=" Delete Item " />
<input id="ReadAll" type="button" value=" Read All " />
<asp:ListBox ID="to" runat="server" SelectionMode="Multiple">
<asp:ListItem Value="to1">to list 1</asp:ListItem>
<asp:ListItem Value="to2">to list 2</asp:ListItem>
<asp:ListItem Value="to3">to list 3</asp:ListItem>
<asp:ListItem Value="to4">to list 4</asp:ListItem>
<asp:ListItem Value="to5">to list 5</asp:ListItem>
</asp:ListBox>
</div>