将项从一个 <asp：ListBox> 动态复制到另一个

Question

这是我们的代码：

  <div>
 <table style="width: 349px">
    <tr>
    <td class="style1">
        <asp:ListBox ID="leftbox" runat="server" Height="114px" Width="212px" 
            SelectionMode="Multiple" AutoPostBack="True">
        </asp:ListBox>
    </td>
    <td>
        <asp:Button ID="Button1" runat="server" Text=">>" onclick="Button1_Click" /><br />
        <asp:Button ID="Button2" runat="server" Text="<<" onclick="Button2_Click" />
    </td>
    <td>
        <asp:ListBox ID="rightbox" runat="server" Height="117px" Width="231px" 
            SelectionMode="Multiple" AutoPostBack="True"></asp:ListBox>
    </td>
    </tr>
</table>
</div>    

背后的代码是：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        List<string> list= GetNameList();
        leftbox.DataSource = list;
        leftbox.DataBind();             
    }
}
private static List<string> GetNameList()
{
    List<string> list = new List<string>();
    list.Add("keerthana");
    list.Add("sirisha");
    list.Add("anusha");
    list.Add("Anuradha");
    list.Add("Bhavani");
    list.Add("divya");
    list.Sort();
    return list;
}

请告诉我如何在不使用服务器端代码的情况下从leftbox到rightbox逐个添加两个或多个选定项目（如下所示）：

protected void Button1_Click(object sender, EventArgs e)
{
    if (leftbox.SelectedIndex != -1)
    {
        rightbox.Items.Add(leftbox.SelectedItem.Text);
        leftbox.Items.Remove(leftbox.SelectedItem.Text);
    }
}

提前感谢...

Answer 1

使用客户端 javascript 来执行此操作，这样您就不会在每次有人移动某些内容时回发，如果您有 jquery，它可以像以下一样简单：

$("#Button1").button().click(function() {
  $("#leftbox option:selected").each(function() {
      $("#rightbox").append(this);
  });
});

Answer 2

这是从列表框中获取选定项的 Linq 方法

var selectedItems =  leftbox.Items.OfType<ListItem>().Where(item => item.Selected).ToList();

然后，您可以将所有选定的值添加到rightbox，并最终从leftbox中删除

编辑

protected void Button1_Click(object sender, EventArgs e)
{
    List<ListItem> selectedItems = new List<ListItem>();
    if (leftbox.SelectedIndex >= 0)
    {
        for (int i = 0; i < leftbox.Items.Count; i++)
        {
            if (leftbox.Items[i].Selected)
            {
                    selectedItems.Add(leftbox.Items[i]);
            }
        }
    }
    for (int i = 0; i < selectedItems.Count; i++)
    {
        if (!rightbox.Items.Contains(selectedItems[i]))
            rightbox.Items.Add(selectedItems[i]);
        leftbox.Items.Remove(selectedItems[i]);
    }
}

Answer 3

这将

完成工作但这里的问题是..转移项目并单击保存按钮后它将首先提交，然后您的保存代码将读取您从右框移动到左框的所有项目都将返回到右框维塞弗萨

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#left").bind("click", function () {
                    var options = $("[id*=RIghtBox] option:selected");
                    for (var i = 0; i < options.length; i++) {
                        var opt = $(options[i]).clone();
                        $(options[i]).remove();
                        $("[id*=LeftBox]").append(opt);
                    } 
                });
                $("#right").bind("click", function () {
                    var options = $("[id*=LeftBox] option:selected");
                    for (var i = 0; i < options.length; i++) {
                        var opt = $(options[i]).clone();
                        $(options[i]).remove();
                        $("[id*=RIghtBox]").append(opt);
                    }
                });
            });

        </script>