How to Add, Remove ListItems from one ListBox to Another in JQuery?
One of my previous code snippet, Add,Add All, Remove, Remove All functionalities from one ASP.Net ListBox to another in Javascript discussed about moving ListItems from one to another using JavaScript. The introduction of JQuery made the client side DOM manipulation easier and simple.
The following little code snippet will help us implementing the same feature using JQuery.
<head runat="server">
<title></title>
<script src="_scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function() {
$("#btnAdd").click(function() {
$("#ListBox1 > option[@selected]").appendTo("#ListBox2");
});
$("#btnAddAll").click(function() {
$("#ListBox1 > option").appendTo("#ListBox2");
});
$("#btnRemove").click(function() {
$("#ListBox2 > option[@selected]").appendTo("#ListBox1");
});
$("#btnRemoveAll").click(function() {
$("#ListBox2 > option").appendTo("#ListBox1");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
</asp:ListBox>
<input id="btnAdd" type="button" value="Add" />
<input id="btnAddAll" type="button" value="Add All" />
<input id="btnRemove" type="button" value="Remove" />
<input id="btnRemoveAll"type="button" value="Remove All" />
<asp:ListBox ID="ListBox2" runat="server" SelectionMode="Multiple"></asp:ListBox>
</div>
</form>
</body>
</html>
|