多個列表框的jQuery代碼有什么問題？

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

看起來選擇器是錯誤的，您正在嘗試將處理程序分配給元素“ add”：

$("add")

而不是ID為“ add”的元素

$("#add")

與“刪除”元素相同。

Answer 2

我知道我晚了幾年，但可能會對其他人有所幫助。

令人耳目一新，因為您的按鈕是o提交類型。

改變這個：

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

對此：

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