onchange触发AJAX失效求助：无需表单提交实现POST请求

核心问题及修复方案： #

1. 动态元素的事件绑定失效

你的下拉选择器#sheets是通过第一个AJAX请求成功后，动态插入到#tablecollection中的。页面初始化时这个元素还不存在，直接用$('#sheets').on('change', ...)无法绑定事件到后续生成的元素上。

修复方式：使用事件委托，将事件绑定到已经存在的父元素（比如#tablecollection）上：

$('#tablecollection').on('change', '#sheets', function () {
    // 后续逻辑代码
});

2. 选中值获取逻辑错误

你试图通过$('#sheet_val').val()获取选中值，但所有<option>都设置了相同的id="sheet_val"——HTML中id必须唯一，这会导致只能拿到第一个option的值，完全无法正确获取当前选中项。

修复方式：直接从触发事件的select元素本身获取值：

// 方式1：利用事件上下文this
var _sheet = $(this).val();
// 方式2：通过select的id直接获取
var _sheet = $('#sheets').val();

3. AJAX成功回调的变量错误

成功回调里你写了$('#tableData').html(result);，但回调参数是response，result变量未定义，这会导致后续DOM更新失败，同时控制台会抛出未定义错误。

修复方式：把result替换为response：

success: function (response) {
    console.log(response);
    $('#tableData').html(response);
}

修正后的完整JS代码： #

$('#tablecollection').on('change', '#sheets', function () {
    var _sheet = $(this).val();
    var array = {
        sheet: _sheet
    };
    $.ajax({
        url: '/' + 'Page/Inventory/Item/Index/sheetData',
        type: 'POST',
        data: array,
        success: function (response) {
            console.log(response);
            $('#tableData').html(response);
        },
        error: function (xhr, status, error_m) {
            alert('AJAX request failed +' + error_m);
        }
    });
});

额外HTML优化建议 #

移除<option>标签上的id="sheet_val"，因为id必须唯一，这里完全不需要给option设置id：

<option value="@item.TableName">@item.TableName</option>

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