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

How do you move items betwen two listboxes on MVC - JQuery not working

本文关键字：列表 两个 之间 移动 不起作用 -JQuery 项目 MVC      更新时间：2023-09-26

我已经研究过其他关于这方面的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>

将按钮类型从submit to替换为下面的按钮

<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>

您可以将jQuery-Dual-Listbox插件用于jQuery。它需要一些设置，但在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>

源

相关文章：