Question

这是有线情况。这是我的表格：

using (Html.BeginForm("Action", "Controller", FormMethod.Post, new { @class = "myForm" }))
{
    <select name="statusId" onchange="this.form.submit();" class="selectField">
            <option value="-1">-- Pick Item --</option>
            <option value="1">Item XYZ</option>
    </select>
    <button>SUBMIT</button>
}

我有这个简单的ajax调用：

    $(".myForm").on("submit", function (event) {                
        event.preventDefault();                
        var url = $(this).attr("action");
        var formData = $(this).serialize();
        $.ajax({
            url: url,
            type: "POST",
            data: formData,
            dataType: "json",
            success: function (response) {
                alert(response);
            }
        });
    });

当我点击按钮时它工作正常（使用ajax）但我不需要按钮上的ajax我需要选择索引更改当我更改所选索引时，它会使用post-action方法，但不会通过ajax 我在这里想念的是什么？有什么区别？

Answer 1

以下是所有工作所需的所有代码：

$(function() {
    $('button').on('click', function() {
        $('.myForm')[0].submit();
    });
    $('select[name="statusId"]').on('change',function() {
        $('.myForm').triggerHandler( 'submit' );
    });
    $(".myForm").on("submit", function() {                                
        var url = $(this).attr("action");
        var formData = $(this).serialize();
        $.ajax({
            url: url,
            type: "POST",
            data: formData,
            dataType: "json",
            success: function (response) {
                alert(response);
            }
        });
    });
});

您不需要select元素中的内联JS：

<select name="statusId" class="selectField">

注意：如果页面上还有其他按钮，您可能需要为button提供更具体的选择器。

通过ajax提交表单对下拉列表索引更改无效

1 个答案: