在jquery中连续填充多个combox

p5fdfcr1  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(89)

我使用下面的代码来填充多个combox,其中的值是从jquery中的ASP.NET MVC后端代码连续返回的:

var province = $("select[name='@(Model.ProvinceFieldName)']");
var provinceValue = '@provinceId';
var city = $("select[name='@(Model.CityFieldName)']");
var center = $("select[name='@(Model.CenterFieldName)']");
var centerType = $("select[name='@(Model.CenterTypeFieldName)']");
var region = $("select[name='@(Model.RegionFieldName)']");

    if (provinceValue) {
        $("select[name='@(Model.ProvinceFieldName)']").val('@provinceId').trigger('change');
        $.fn.whenAction(function () {
            return $("select[name='@(Model.ProvinceFieldName)']").val() == '@provinceId' && $("select[name='@(Model.RegionFieldName)']").length > 0 && $("select[name='@(Model.CityFieldName)']").length > 0;
        }).then(function () {
            debugger
            var regionId = $("select[name='@(Model.RegionFieldName)'] option").filter(function () {
                return $(this).text() == '@regionName';
            }).val();
            if (regionId) {
                setTimeout(function () {
                    $("select[name='@(Model.RegionFieldName)']").val(regionId).trigger('change');
                    setTimeout(function () {
                        $("select[name='@(Model.CityFieldName)']").val('@cityId').trigger('change');
                    }, 2000);
                }, 2000);
            } else {
                $("div#error-alert").css({ "display": "block" });
                setTimeout(function () {
                    $("select[name='@(Model.CityFieldName)']").val('@cityId').trigger('change');
                }, 2000);
            }
            $.fn.whenAction(function () {
                return $("select[name='@(Model.CityFieldName)']").val() == '@cityId' && $("select[name='@(Model.CenterTypeFieldName)']").length > 0;
            }).then(function () {
                setTimeout(function () {
                    $("select[name='@(Model.CenterTypeFieldName)']").val('@centerTypeId').trigger('change');
                }, 2000);
                $.fn.whenAction(function () {
                    return $("select[name='@(Model.CenterTypeFieldName)']").val() == '@centerTypeId' && $("select[name='@(Model.CenterFieldName)']").length > 0;
                }).then(function () {
                    setTimeout(function () {
                        $("select[name='@(Model.CenterFieldName)']").val('@centerId').trigger('change');
                    }, 2000);
                    $.fn.whenAction(function () {
                        return $("select[name='@(Model.CenterFieldName)']").val() != '@centerId' && $("select[name='@(Model.CenterFieldName)']").length > 0;
                    }).then(function () {
                        setTimeout(function () {
                            $("select[name='@(Model.CenterFieldName)']").val('@centerId').trigger('change');
                        }, 2000);
                    });
                });
            });
        });

字符串
这是我使用的whenAction函数:

(function ($) {
$.fn.whenAction = function (action, check_freq) {
    var freq = check_freq || 500;
    var defer = $.Deferred();
    var int = setInterval(function () {
        if (action() === true) {
            clearInterval(int);
            defer.resolve();
        }
    }, freq);
    return defer.promise();
}
})(jQuery);


但它并不总是正常工作。通常它不能正确地填充组合并且组合保持空和

qq24tv8q

qq24tv8q1#

下面是一个可能的替代代码,它可能更适合您的场景:

var province = $("select[name='@(Model.ProvinceFieldName)']");
var provinceValue = '@provinceId';
var city = $("select[name='@(Model.CityFieldName)']");
var center = $("select[name='@(Model.CenterFieldName)']");
var centerType = $("select[name='@(Model.CenterTypeFieldName)']");
var region = $("select[name='@(Model.RegionFieldName)']");

if (provinceValue) {
    // Set the value of province combobox and trigger change event
    province.val(provinceValue).trigger('change');
    // Attach a change event handler to province combobox
    province.change(function () {
        // Get the selected value of province combobox
        var provinceId = $(this).val();
        // Check if provinceId is valid
        if (provinceId) {
            // Populate region combobox based on provinceId
            $.getJSON("/Admin/GetRegionList/", { provinceId: provinceId }, function (result) {
                // Clear the options of region combobox
                region.empty();
                // Loop through each item in result
                $.each(result, function (index, item) {
                    // Create a new option element with value and text from item
                    var option = $("<option></option>").val(item.RegionID).text(item.Name);
                    // Append the option element to region combobox
                    region.append(option);
                });
                // Set the value of region combobox based on region name and trigger change event
                region.val('@regionId').trigger('change');
            });
        }
    });
    // Attach a change event handler to region combobox
    region.change(function () {
        // Get the selected value of region combobox
        var regionId = $(this).val();
        // Check if regionId is valid
        if (regionId) {
            // Populate city combobox based on regionId
            $.getJSON("/Admin/GetCityList/", { regionId: regionId }, function (result) {
                // Clear the options of city combobox
                city.empty();
                // Loop through each item in result
                $.each(result, function (index, item) {
                    // Create a new option element with value and text from item
                    var option = $("<option></option>").val(item.CityID).text(item.Name);
                    // Append the option element to city combobox
                    city.append(option);
                });
                // Set the value of city combobox based on city id and trigger change event
                city.val('@cityId').trigger('change');
            });
        }
    });
    // Attach a change event handler to city combobox
    city.change(function () {
        // Get the selected value of city combobox
        var cityId = $(this).val();
        // Check if cityId is valid
        if (cityId) {
            // Populate center type combobox based on cityId
            $.getJSON("/Admin/GetCenterTypeList/", { cityId: cityId }, function (result) {
                // Clear the options of center type combobox
                centerType.empty();
                // Loop through each item in result
                $.each(result, function (index, item) {
                    // Create a new option element with value and text from item
                    var option = $("<option></option>").val(item.CenterTypeID).text(item.Name);
                    // Append the option element to center type combobox
                    centerType.append(option);
                });
                // Set the value of center type combobox based on center type id and trigger change event
                centerType.val('@centerTypeId').trigger('change');
            });
        }
    });
    // Attach a change event handler to center type combobox
    centerType.change(function () {
        // Get the selected value of center type combobox
        var centerTypeId = $(this).val();
        // Check if centerTypeId is valid
        if (centerTypeId) {
            // Populate center combobox based on centerTypeId
            $.getJSON("/Admin/GetCenterList/", { centerTypeId: centerTypeId }, function (result) {
                // Clear the options of center combobox
                center.empty();
                // Loop through each item in result
                $.each(result, function (index, item) {
                    // Create a new option element with value and text from item
                    var option = $("<option></option>").val(item.CenterID).text(item.Name);
                    // Append the option element to center combobox
                    center.append(option);
                });
                // Set the value of center combobox based on center id and trigger change event
                center.val('@centerId').trigger('change');
            });
        }
    });
}

字符串

相关问题