Question

在Ajax.BeginForm提交后，下拉列表级联更改（）不会激活imediatly。

生成新DropDownList的视图：

@model Heelp.ViewModels.CreateAdCategoryTypeViewModel
@using (Ajax.BeginForm(MVC.Ad.CreateAd(), new AjaxOptions { UpdateTargetId = "ad", InsertionMode = InsertionMode.Replace }, new { @id = "categoryTypeForm" }))
{
    @Html.HiddenFor(m => m.Category_Id)

    @Html.DisplayNameFor(m => m.CategoryType_Id)
    @Html.DropDownListFor(m => m.CategoryType_Id, Model.CategoryList, HeelpResources.DropdownlistCategoryFirstRecord)
    @Html.ValidationMessageFor(m => m.CategoryType_Id)
}

在sumbit之后，生成的View是：

@model Heelp.ViewModels.CreateAdCarViewModel

@using (Html.BeginForm()) {

<fieldset>
    <legend>Car</legend>

   <div id="makes">
        @Html.DisplayNameFor(m => m.Make_Id)
        @Html.DropDownListFor(m => m.Make_Id, Model.MakeList, HeelpResources.DropdownlistMakeFirstRecord)
        @Html.ValidationMessageFor(m => m.Make_Id)
    </div>
    <div id="models">
        @Html.DisplayNameFor(m => m.Model_Id)
        @Html.DropDownListFor(m => m.Model_Id, Model.ModelList)
        @Html.ValidationMessageFor(m => m.Model_Id)
    </div>        
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>

此时我有一个级联功能，当Make更改为填充模型列表时触发：

$(document).ready(function () {
    $(document).on("change", "#Make_Id", function () {
        $('#Make_Id').cascade({
            source: "/Ad/ListModelByMake",
            cascaded: "Model_Id"
        });
    });
});

级联功能：

// Cascade function
(function ($) {
$.fn.cascade = function (options) {
    var defaults = {};
    var opts = $.extend(defaults, options);

    return this.each(function () {
        $(this).change(function () {
            var selectedValue = $(this).val();
            var params = {};
            params[opts.paramName] = selectedValue;
            $.post(opts.url, params, function (items) {
                //$.getJSON(opts.url, params, function (items) {
                opts.childSelect.empty();
                if (opts.firstOption != "")
                    opts.childSelect.append(
                        $('<option/>')
                            .attr('value', '-1')
                            .text(opts.firstOption));
                $.each(items, function (index, item) {
                    // alert(opts.firstOption);
                    opts.childSelect.append(
                        $('<option/>')
                            .attr('value', item.Id)
                            .text(item.Name)
                    );
                });
            });
        });
    });
};
})(jQuery);

不幸的是，只有在制作下拉列表中进行第二次更改后，它才有效吗？

感谢。

Answer 1

不要使用更改处理程序来启动插件。插件代码将更改处理程序绑定到元素。

由于您在更改处理程序中调用插件，因此插件的更改处理程序将不会触发，直到下次更改select时因为初始更改事件已经发生。

将代码更改为：

$(document).ready(function () {   
        $('#Make_Id').cascade({
            source: "/Ad/ListModelByMake",
            cascaded: "Model_Id"
        });   
});

Answer 2

感谢Charlietfi，我能够解决这个问题，这是解决方案：

在Ajax.Form中，我们需要添加一个OnSucess调用来定义级联函数：

@using (Ajax.BeginForm(MVC.Ad.CreateAd(), new AjaxOptions { UpdateTargetId = "ad", InsertionMode = InsertionMode.Replace, OnSuccess = "createAdCategoryTypeOnSucess" }, new { @id = "categoryTypeForm" }))

然后在外部JS文件中，我们可以定义级联定义：

function createAdCategoryTypeOnSucess() 
{
    $("#Make_Id").cascade({
        url: "/Ad/ListModelByMake",
        paramName: "makeId",
        firstOption: '',
        childSelect: $("#Model_Id")
    });
}

像这样，事件在下拉列表更改后立即触发。

再次感谢charlietfl;）

JQuery Cascade函数在更改事件后不立即触发

2 个答案: