Dual asp.net list boxes and jquery





Move selected item to the left hand side list box, move all items to the left hand side list box, move selected item to the right hand side list box, and move all items to the right hand list box.  Let’s   implement above features using JQuery.

ASP.NET Code

<div style=”float: left;”>

<asp:ListBox ID=”ListBox1″ runat=”server”

Height=”550px” SelectionMode=”Multiple”>

<asp:ListItem>One</asp:ListItem>

<asp:ListItem>Two</asp:ListItem>

<asp:ListItem>Three</asp:ListItem>

<asp:ListItem>Four</asp:ListItem>

<asp:ListItem>Five</asp:ListItem>

<asp:ListItem>Six</asp:ListItem>

<asp:ListItem>Seven</asp:ListItem>

<asp:ListItem>Eight</asp:ListItem>

<asp:ListItem>Nine</asp:ListItem>

<asp:ListItem>Ten</asp:ListItem>

</asp:ListBox>

</div>

<!– buttons –>

<div style=”float: left; width: 100px; height: 550px; text-align: center; vertical-align: text-bottom;”>

<br />

<br />

<a id=”btnRightAll”>Move all ></a>

<br />

<br />

<a id=”btnRight”>Right >></a>

<br />

<br />

<a id=”btnLeft”><< Leftt</a>

<br />

<br />

<a id=”btnLeftAll”>< Move all</a>

<br />

<br />

<asp:Button ID=”btnDone” runat=”server” Text=”Done” />

</div>

<div style=”float: left;”>

<asp:ListBox ID=”ListBox2″ runat=”server”

Height=”550px” SelectionMode=”Multiple”></asp:ListBox>

</div>

JQUERY Code

<script type=”text/javascript”>

$(document).ready(function() {
//move selected item to the right
$(“#btnRight”).click(function() {
$(“#<%=ListBox1.ClientID%> > :0ption[selected]”).appendTo($(“#<%=
ListBox2.ClientID%>”));
});

//move all items to the right
$(“#btnRightAll”).click(function() {
$(“#<%=
ListBox1.ClientID%> > :0ption”).appendTo($(“#<%=ListBox2.ClientID%>”));
});

// move selected item to the left
$(“#btnLeft”).click(function() {
$(“#<%=
ListBox2.ClientID%> > :0ption[selected]”).appendTo($(“#<%=ListBox1.ClientID%>”));
});

// move all items to left list
$(“#btnLeftAll”).click(function() {
$(“#<%=
ListBox2.ClientID%> > :0ption”).appendTo($(“#<%=ListBox1.ClientID%>”));
});
});

</script>

Note:

In javascript replace first letter of “:0ption”
with English letter “o” I am using 0 (zero) as it was putting smiley while i was using English letter o.




Tags: , , , ,

One Response to “Dual asp.net list boxes and jquery”

  1. ranga says:

    Hi,

    i am not able to use this one, can sand me source code with the above example.

    Thank you very much, Have a nice day.

    Ranganath