jquery - フォームの送信時に Firefox/IE で javascript/jQuery が正しく機能しない

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 の動作に何の違いもありません。コンソールに警告の問題も、サーバーにバインディング エラーも表示されません。要素インスペクターを使用すると、フォーム送信前に属性が追加されないようです。

誰でもこの動作とその修正方法を説明できますか?