Item Swapping between Listboxes using jQuery

Hi All, in this article I’ll show how to swap item of listboxes.
1

Code Behind Page:

protected void Page_Load(object sender, EventArgs e)
{
LoadLB();
}

private void LoadLB()
{
for (int i = 0; i < 26; ++i)
{
if (i < 13)
{
lb1.Items.Add(new ListItem(Convert.ToString((char)(65 + i)), (i + 1).ToString()));
}
else
{
lb2.Items.Add(new ListItem(Convert.ToString((char)(65 + i)), (i + 1).ToString()));
}
}
}

Aspx Page:

<asp:Content ID=”Content1″ ContentPlaceHolderID=”HeadContent” runat=”Server”>
Item Swaping from ListBoxes
<style type=”text/css”>
.lb {
min-height: 250px;
min-width: 100px;
float: left;
}

.div {
width: 300px;
}

.div div {
width: 100px;
float: left;
text-align: center;
}

#divBtn {
width: 40px;
float: left;
text-align: center;
}

.button {
width: 30px;
height: 30px;
}
</style>
<script type=”text/javascript”>
$(document).ready(function () {
$(‘[id$=btnAllForward]’).click(function () {
var lb1 = $(‘[id$=lb1]’);
var lb2 = $(‘[id$=lb2]’);
$(lb1).children(‘option’).each(function (index) {
lb2.append(‘<option value=”‘ + $(this).val() + ‘”>’ + $(this).text() + ‘</option>’);
});
lb1.find(‘option’).remove();
});
});

$(document).ready(function () {
$(‘[id$=btnSingleForward]’).click(function () {
var lb1 = $(‘[id$=lb1]’);
var values = lb1.val();
var text = lb1.find(‘option:selected’).text();
var lb2 = $(‘[id$=lb2]’);
for (var i = 0; i < values.length; ++i) {
lb2.append(‘i] + ‘”>’ + text[i] + ”);
}
lb1.find(‘option:selected’).remove();
});
});

$(document).ready(function () {
$(‘[id$=btnSingleBackward]’).click(function () {
var lb2 = $(‘[id$=lb2]’);
var values = lb2.val();
var text = lb2.find(‘option:selected’).text();
var lb1 = $(‘[id$=lb1]’);
for (var i = 0; i < values.length; ++i) {
lb1.append(‘<option value=”‘ + values[i] + ‘”>’ + text[i] + ‘</option>’);
}
lb2.find(‘option:selected’).remove();
});
});

$(document).ready(function () {
$(‘[id$=btnAllBackward]’).click(function () {
var lb1 = $(‘[id$=lb1]’);
var lb2 = $(‘[id$=lb2]’);
$(lb2).children(‘option’).each(function (index) {
lb1.append(‘<option value=”‘ + $(this).val() + ‘”>’ + $(this).text() + ‘</option>’);
});
lb2.find(‘option’).remove();
});
});
</script>
</asp:Content>
<asp:Content ID=”Content2″ ContentPlaceHolderID=”MainContent” runat=”Server”>

Item Swaping from ListBoxes

<hr />
<div>
<div>
<asp:ListBox ID=”lb1″ runat=”server” SelectionMode=”Multiple” CssClass=”lb”>
</div>
<div id=”divBtn”>
<input type=”button” id=”btnAllForward” value=”>>” />
<input type=”button” id=”btnSingleForward” value=”>” />
<input type=”button” id=”btnSingleBackward” value=”<” />
<input type=”button” id=”btnAllBackward” value=”<<” />
</div>
<div>
<asp:ListBox ID=”lb2″ runat=”server” SelectionMode=”Multiple” CssClass=”lb”>
</div>
</div>
</asp:Content>

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s