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

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

e.g。为你的标记：

<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

Answer 2

将按钮类型从提交更改为按钮，如下所示

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

如何在MVC上的两个列表框之间移动项目 - JQuery无法正常工作

2 个答案: