jqGrid编辑模式下如何根据首个下拉框选择更新第二个下拉框

我来帮你搞定这个联动需求，核心就是在国家下拉框的change事件里动态请求对应货币数据，然后更新货币下拉框的选项。下面一步步来实现：

第一步：先把货币列配置成可编辑的下拉框 #

你原来的currencyId列只是普通可编辑列，得先改成下拉框类型，预留动态更新的空间：

{ 
    key: false, 
    name: 'currencyId', 
    index: 'currencyId', 
    editable: true,
    edittype: 'select', // 设置为下拉框类型
    editoptions: {
        value: '', // 初始值留空，后续动态填充
    },
    editrules: { required: true, integer: true }
}

第二步：实现国家下拉框的 onChange 联动逻辑 #

接下来完善countryId列的dataEvents里的change事件，这里是联动的核心：

dataEvents: [{ // 注意这里是数组格式，每个事件是一个对象
    type: 'change',
    fn: function (e) {
        // 获取当前选中的国家ID
        const selectedCountryId = $(this).val();
        // 获取编辑表单里的货币下拉框（弹窗编辑时用这个选择器更准确）
        const currencySelect = $('.EditTable #currencyId');

        // 发起AJAX请求获取对应国家的货币列表
        $.ajax({
            url: '@Url.Action("GetCurrenciesByCountry", "Maintenance")', // 你需要后端实现这个接口
            dataType: 'json',
            type: 'POST',
            data: { countryId: selectedCountryId }, // 传递选中的国家ID
            success: function(response) {
                // 清空原有选项
                currencySelect.empty();
                if (response && response.length > 0) {
                    // 遍历生成新的选项
                    let options = '';
                    $.each(response, function(idx, currency) {
                        options += `<option value="${currency.id}">${currency.name}</option>`;
                    });
                    currencySelect.append(options);
                } else {
                    // 没有对应货币时的提示
                    currencySelect.append('<option value="">无可用货币</option>');
                }
            },
            error: function() {
                currencySelect.empty().append('<option value="">加载货币失败，请重试</option>');
            }
        });
    }
}]

第三步：处理编辑行时的初始货币加载 #

当你编辑已有数据行时，需要根据当前行的国家ID自动加载对应的货币并选中原有值，这一步可以在编辑表单显示前处理，也就是在navGrid的编辑选项里加beforeShowForm：

{ // edit options
    zIndex: 1000,
    url: '@Url.Action("EditSupplier", "Maintenance")',
    dataType: "html",
    closeOnEscape: true,
    closeAfterEdit: true,
    recreateForm: true,
    beforeShowForm: function(form) {
        // 获取当前选中行的ID和对应的国家、货币ID
        const selRowId = $("#jqgrid").jqGrid('getGridParam', 'selrow');
        const countryId = $("#jqgrid").jqGrid('getCell', selRowId, 'countryId');
        const currentCurrencyId = $("#jqgrid").jqGrid('getCell', selRowId, 'currencyId');
        const currencySelect = $(form).find('#currencyId');

        if (countryId) {
            // 发起请求加载对应货币
            $.ajax({
                url: '@Url.Action("GetCurrenciesByCountry", "Maintenance")',
                dataType: 'json',
                type: 'POST',
                data: { countryId: countryId },
                success: function(response) {
                    currencySelect.empty();
                    if (response && response.length > 0) {
                        let options = '';
                        $.each(response, function(idx, currency) {
                            // 选中当前行原本的货币
                            const selected = currency.id === currentCurrencyId ? 'selected' : '';
                            options += `<option value="${currency.id}" ${selected}>${currency.name}</option>`;
                        });
                        currencySelect.append(options);
                    } else {
                        currencySelect.append('<option value="">无可用货币</option>');
                    }
                }
            });
        }
    },
    afterComplete: function(response) {
        $('#alerts').html(response.responseText);
    }
}

第四步：后端接口补充 #

你需要在Maintenance控制器里实现GetCurrenciesByCountry方法，接收countryId参数，返回对应的货币列表（JSON格式），示例如下：

public ActionResult GetCurrenciesByCountry(int countryId)
{
    // 这里替换成你从数据库获取数据的逻辑
    var currencies = _supplierService.GetCurrenciesForCountry(countryId);
    return Json(currencies, JsonRequestBehavior.AllowGet);
}

几个注意点 #

• 确保AJAX请求的URL正确，后端接口能正常接收参数并返回数据；
• 如果是弹窗编辑，货币下拉框的选择器要准确，$('.EditTable #currencyId')是jqGrid默认编辑表单的选择器；
• 别忘了处理空数据和请求失败的情况，避免用户看到空白下拉框。

内容的提问来源于stack exchange，提问作者CompiledIO