<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#<%=btnMoveRight.ClientID %>').click(function ()
{
var selectedOptions = $('#<%=lstBox1.ClientID %> option:selected');
if (selectedOptions.length == 0) {
alert("Please select option to move");
return false;
}
$('#<%=lstBox2.ClientID %>').append($(selectedOptions).clone());
$(selectedOptions).remove();
return false;
});
$('#<%=btnMoveLeft.ClientID %>').click(function () {
var selectedOptions = $('#<%=lstBox2.ClientID %> option:selected');
if (selectedOptions.length == 0) {
alert("Please select option to move");
return false;
}
$('#<%=lstBox1.ClientID %>').append($(selectedOptions).clone());
$(selectedOptions).remove();
return false;
});
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListBox ID="lstBox1" runat="server" SelectionMode="Multiple" Height="138px"
Width="108px">
<asp:ListItem Text="A" Value="1"></asp:ListItem>
<asp:ListItem Text="B" Value="2"></asp:ListItem>
<asp:ListItem Text="C" Value="3"></asp:ListItem>
<asp:ListItem Text="D" Value="4"></asp:ListItem>
<asp:ListItem Text="1" Value="1"></asp:ListItem>
<asp:ListItem Text="2" Value="2"></asp:ListItem>
<asp:ListItem Text="3" Value="3"></asp:ListItem>
<asp:ListItem Text="4" Value="4"></asp:ListItem>
</asp:ListBox>
<asp:Button ID="btnMoveRight" runat="server" Text=">>" />
<asp:Button ID="btnMoveLeft" runat="server" Text="<<" />
<asp:ListBox ID="lstBox2" runat="server" SelectionMode="Multiple" Height="134px"
Width="104px">
<asp:ListItem Text="E" Value="5"></asp:ListItem>
<asp:ListItem Text="F" Value="6"></asp:ListItem>
<asp:ListItem Text="G" Value="7"></asp:ListItem>
<asp:ListItem Text="H" Value="8"></asp:ListItem>
</asp:ListBox>
</div>
</form>
</body>
</html>
<head runat="server">
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#<%=btnMoveRight.ClientID %>').click(function ()
{
var selectedOptions = $('#<%=lstBox1.ClientID %> option:selected');
if (selectedOptions.length == 0) {
alert("Please select option to move");
return false;
}
$('#<%=lstBox2.ClientID %>').append($(selectedOptions).clone());
$(selectedOptions).remove();
return false;
});
$('#<%=btnMoveLeft.ClientID %>').click(function () {
var selectedOptions = $('#<%=lstBox2.ClientID %> option:selected');
if (selectedOptions.length == 0) {
alert("Please select option to move");
return false;
}
$('#<%=lstBox1.ClientID %>').append($(selectedOptions).clone());
$(selectedOptions).remove();
return false;
});
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListBox ID="lstBox1" runat="server" SelectionMode="Multiple" Height="138px"
Width="108px">
<asp:ListItem Text="A" Value="1"></asp:ListItem>
<asp:ListItem Text="B" Value="2"></asp:ListItem>
<asp:ListItem Text="C" Value="3"></asp:ListItem>
<asp:ListItem Text="D" Value="4"></asp:ListItem>
<asp:ListItem Text="1" Value="1"></asp:ListItem>
<asp:ListItem Text="2" Value="2"></asp:ListItem>
<asp:ListItem Text="3" Value="3"></asp:ListItem>
<asp:ListItem Text="4" Value="4"></asp:ListItem>
</asp:ListBox>
<asp:Button ID="btnMoveRight" runat="server" Text=">>" />
<asp:Button ID="btnMoveLeft" runat="server" Text="<<" />
<asp:ListBox ID="lstBox2" runat="server" SelectionMode="Multiple" Height="134px"
Width="104px">
<asp:ListItem Text="E" Value="5"></asp:ListItem>
<asp:ListItem Text="F" Value="6"></asp:ListItem>
<asp:ListItem Text="G" Value="7"></asp:ListItem>
<asp:ListItem Text="H" Value="8"></asp:ListItem>
</asp:ListBox>
</div>
</form>
</body>
</html>
No comments:
Post a Comment