Question

我无法在MVC 5应用程序中使用以下jQuery代码（它不会在列表框之间传输所选项目）：

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

列表框的其余标记是：

@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" />

            <input type="submit" name="remove-all" id="remove-all" value="RemAll" />

            <input type="submit" name="select-all" id="select-all" value="SelAll" />

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

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

控制器是：

 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脚本不起作用。我做错了什么？

Answer 1

看起来选择器是错误的，您正在尝试将处理程序分配给元素＆＃34;添加＆＃34;：

$("add")

而不是ID为＃34的元素;添加＆＃34;

$("#add")

同样的＆＃34;删除＆＃34;元件。

Answer 2

我知道我要晚了几年，但这可能会对其他人有所帮助。

令人耳目一新，因为您的按钮是o键入提交。

更改此内容：

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

对此：

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

这个用于多个列表框的jQuery代码有什么问题？

2 个答案: