Question

我基本上想使用Jquery将项目从一个列表框移动到另一个列表框。我试图在我的MVC应用程序中执行此操作。

下面评论的代码有效，但它不是我想要的。因此，如果我在源列表框中选择一个项目，它将被添加到目标列表框中。我基本上希望在点击按钮时发生运动。那就是$（'＃ShiftRight'）。click（我在下面写的函数（）。在下面你会看到两个列表框和按钮代码。我面临的问题是当我点击按钮时，项目移动到目的地一秒钟然后再回到源头。有人能告诉我为什么会这样吗？

//$('#sourceItems').change(function () {
//    $('#sourceItems option:selected').appendTo('#destinationItems');
//});

$('#ShiftRight').click(function () {
    $('#sourceItems option:selected').appendTo('#destinationItems');
});

<div class="Row">
    <div class="borderlessCell" style="vertical-align:top">
        <p>@Html.Label("List of Recipients")</p>
    </div>
    <div class="borderlessCell" style="vertical-align:top">
        @Html.ListBox("sourceItems", (IEnumerable<SelectListItem>)ViewBag.UserList, new { @style = "width: 250px;height: 130px;" })
    </div>
    <div class="borderlessCell" style="vertical-align:middle">
        <p><input type="submit" id="ShiftRight" value=">>" /> </p>
        <p> <input type="submit" id="ShiftLeft" value="<<" /></p>
    </div>

    <div class="borderlessCell">
        @Html.ListBox("destinationItems", new SelectList(new[] { "" }), new { @style = "width: 250px;height: 130px;" })
    </div>

Answer 1

它似乎重新出现在原始列表中的原因是因为您正在使用提交按钮，这会导致表单的回发。将input type="submit"更改为普通按钮：

<p><button id="ShiftRight">&gt;&gt;</button></p>
<p><button id="ShiftLeft">&lt;&lt;</button></p>

使用jquery将项目从一个列表框移动到另一个列表框

1 个答案: