如何在 MVC 上的两个列表框之间移动项目 - JQuery 不起作用

Question

我已经查看了关于此的其他 SO 主题，但它们最终要么非常老旧，要么使用 WebForms。我有一个 MVC 视图，其中有两个列表框。我想在两个列表框之间来回移动项目。视图是：

  @using (Html.BeginForm())
    {
       @Html.ListBoxFor(m => m.SelectedAttributes, Model.Attributes, new {id="listBoxAvail", SIZE = 5} ) 

        <input type="submit" name="add" 
               id="add" value="MoveRight" />

        <input type="submit" name="remove" 
               id="remove" value="MoveLeft" />

        @Html.ListBoxFor(m => m.SelectedAttributes2, Model.SelectedItems, new { id = "listBoxSel", SIZE = 5})
    } 

ViewModel 是：

    public class OptInViewModel
        {
            public IEnumerable<string> SelectedAttributes { get; set; }
            public IEnumerable<string> SelectedAttributes2 { get; set; }
            public IEnumerable<SelectListItem> Attributes { get; set; }
            public IEnumerable<SelectListItem> SelectedItems { get; set; }
        }

And the Controller code is:

 public ActionResult Index()
        {
            AttributeEntities db = new AttributeEntities();
            List<SelectListItem> listSelectListItems = new List<SelectListItem>();
            List<SelectListItem> listSelItems = new List<SelectListItem>();

            foreach (var attributes in db.HarmonyAttributes)
            {
                SelectListItem selectList = new SelectListItem
                {
                    Text = attributes.AttributeName,
                    Value = attributes.AtrributeLabel,
                    Selected = false
                };
                listSelectListItems.Add(selectList);
            }

            foreach (var sel in db.SelectedHarmonyAttributes)
            {
                SelectListItem selList = new SelectListItem
                {
                    Text = sel.CustomLabel,
                    Value = sel.HarmonyAttribute_ID.ToString(),
                    Selected = false
                };
                listSelectListItems.Add(selList);
            }

            OptInViewModel viewModel = new OptInViewModel
            {
                Attributes = listSelectListItems,
                SelectedItems = listSelItems
            };


            return View(viewModel);
        }

我使用 JQuery 来尝试执行此操作，但它不起作用（没有任何内容传输到第二个列表框）。有人知道怎么了？

<script src="~/Scripts/jquery-2.1.1.js"></script>
    <script>
        $(function () {
            $("add").click(function () {
                $("#listBoxAvail > option:selected").each(function () {
                    $(this).remove().appendTo("#listBoxSel");
                });
            });

            $("remove").click(function () {
                $("#listBoxSel > option:selected").each(function () {
                    $(this).remove().appendTo("#listBoxAvail");
                });
            });
        });
</script>

Answer 1

将按钮类型从提交到按钮替换为如下所示

<input type="button" name="add" id="add" value="MoveRight" />
<input type="button" name="remove" id="remove" value="MoveLeft" />

在您的 JavaScript 中，正确的选择器在 ID 前面加上 #，它应该可以工作！

$("add") 到 $("#add")

和

$("remove") 到 $("#remove")

如果你愿意，你可以把它减少到

  <script>
    $(function() {
      $(document)
        .on("click", "#add", function() {
          $("#listBoxAvail :selected").remove().appendTo("#listBoxSel");
        })
        .on("click","#remove", function() {
          $("#listBoxSel :selected").remove().appendTo("#listBoxAvail");
        });
    });
  </script>

Answer 2

您可以使用 jQuery 的 jQuery-Dual-Listbox 插件。它需要一些设置，但在 MVC 环境中运行良好。需要注意的是，为了将您在第二个列表框中选择的值发送回服务器进行处理，您需要确保该列表框中的所有项目都是selected，然后才能提交表单。

例如为您的标记：

<script src="jQuery.dualListBox-1.3.js" type="text/javascript"/>
<script type="text/javascript">
$(function () {
    $.configureBoxes({
        box1View: 'listBoxAvail',
        box2View: 'listBoxSel',
        to1: 'remove',
        to2: 'add',
        allTo1: 'remove-all',  //you must create this button
        allTo2: 'add-all',     //you must create this button
        useFilters: false
    });
});
$("#listBoxSel").closest("form").on("submit",
    function() {
        //only selected options in listbox get POSTed back!
        $("#listBoxSel > option").prop("selected", true);
        return true;
    }
}
</script>

Source