0

我们有一个表单，用户可以在其中将项目从一个多选框移动到另一个。我们正在使用 MVC 4.5 和 jquery 验证与 Microsoft 的不显眼的 javascript。

问题是，在提交表单时，选择框中的值不会被提交，因为用户在移动项目后不知道他们还必须选择所有这些项目进行提交。

所以解决方案听起来很简单：使用 jquery 在提交时选择所有项目。

在做了一些研究（感谢 stackoverflow 社区）之后，我们能够发现必要的 jquery 代码来拦截提交过程。但是，问题出现在代码选择项目时，仅选择了选择框中预先存在的项目。已移动的实时（动态）项目不会被选中。

这是我们第一次使用的代码：

$('#UserProfileForm').bind('invalid-form.validate',function(){
    $(this).find('.selectbox option').each(function (i) {
        $(this).attr("selected", "selected");
    });
});

我们发现使用 bind 不起作用，但 live 应该：

$('#UserProfileForm').live('invalid-form.validate',function(){
    $(this).find('.selectbox option').each(function (i) {
        $(this).attr("selected", "selected");
    });
});

但是，我们使用的是 jquery 1.9，并且 live 功能已被删除。它已被替换为：

$(document).on('invalid-form.validate', 'form', function () {
    $(this).find('.selectbox option').each(function (i) {
        $(this).attr("selected", "selected");
    });
});

但是，这仍然行不通。所以我用警报替换了选择功能，看看它是否有效：

$(document).on('invalid-form.validate', 'form', function () {
    alert('test');
});

不会弹出警报。有任何想法吗？

附加信息

对于那些想知道我为什么引用 invalid-form.validate 的人来说，是因为我正在使用无效的表单数据进行测试。如果它是有效的表单数据，同样的情况也适用。我只是还没有谈到如何将实时数据绑定到有效的表单提交过程。

4

1 回答 1

-1

检查元素后，我注意到 jquery 正在将 selected 属性添加到选项中。但是，没有突出显示这些选项。这让我想到添加所选属性的 jquery 调用可能是错误的。

经过一番实验，我发现这是错误的。看来，如果您使用 jquery 的 attr 函数，它实际上并没有在 DOM 中将选项设置为 selected 。使用 prop 函数可以。

这是代码：

$(document).on('submit', 'form', function (e) {
    $(this).find('.selectbox option').each(function (i) {
        $(this).prop("selected", true);
    });
});

这允许表单选择在表单提交时选择的所有选项，无论提交处理程序是否有效。如果您只想根据无效信息进行选择，请使用：

$('form').bind('invalid-form.validate', function () {
    $(this).find('.selectbox option').each(function (i) {
         $(this).prop("selected", true);
    });
});

享受！

于 2013-09-24T20:34:28.333 回答