Question

我在MVC剃刀中生成了一个表单，用于在列表框之间移动联系人（已分配和未分配）。

我使用jQuery在列表框之间移动<option>元素，然后在提交表单时使用selected属性绑定它们。

@model SiteAssignmentViewModel
@using (Html.BeginForm())
{
    @Html.ListBox("AvailableContacts", new SelectList(Model.Contacts.Where(p => !Model.SelectedContactIDs.Contains(p.ID)), "ID", "FullName"))
    <br />
    <br />
    <input type="button" value=">" onclick="MoveListBoxItems('AvailableContacts', '@Html.IdFor(m => m.SelectedContactIDs)');" />
    <input type="button" value="<" onclick="MoveListBoxItems('@Html.IdFor(m => m.SelectedContactIDs)', 'AvailableContacts');" />
    <br />
    <br />
    @Html.ListBoxFor(model => model.SelectedContactIDs, new SelectList(Model.Contacts.Where(p => Model.SelectedContactIDs.Contains(p.ID)), "ID", "FullName"))
    <br />
    <br />
    <input type="submit" value="OK" onclick="BindListBoxItems('@Html.IdFor(m => m.SelectedContactIDs)');" />
}

<script>
    function MoveListBoxItems(fromListBox, toListBox) {
        $("#" + fromListBox).find("option:selected").appendTo($("#" + toListBox));
        $("#" + toListBox).find("option").attr("selected", false);
    }

    function BindListBoxItems(listBox) {
        $("#" + listBox).find("option").attr("selected", true);
    };
</script>

使用Chrome时，它的工作效果非常好，您会看到视图中选择的选项然后提交给服务器。

但是在Firefox和IE中，会调用该函数，但在提交表单之前不会附加所选属性。如果我将按钮类型更改为button，则会按预期选择所有选项（现在表单将不会提交）。我尝试用以下相同的方法包装表单提交：

<input type="submit" value="OK" onclick="SubmitForm('@Html.IdFor(m => m.SelectedContactIDs)');" />
<script>
    function SubmitForm() {
        $("#" + listBox).find("option").attr("selected", true);
        $("#contactsForm").submit();
    }
</script>

这对Firefox中的行为没有任何影响，我在控制台上没有任何警告问题或服务器上的任何绑定错误。使用元素检查器时，似乎在表单提交之前不会附加属性。

任何人都可以解释这种行为以及如何解决这个问题吗？

Answer 1

您只需在提交按钮上使用click事件即可。我看不到你的所有HTML标记，但是：

<input type="submit" value="OK" />

<script>
$(document).ready(function(){

   $("input[type='submit']").bind("click", function(){

      // code would go here
      SubmitForm();

      return false;
   });

   function SubmitForm() {
       $("#" + listBox).find("option").attr("selected", true);
       $("#contactsForm").submit();
   }

});
</script>

你也可以尝试$（“form”）。submit（）;

提交表单时，javascript / jQuery在Firefox / IE中无法正常工作

1 个答案: