如何在JQuery中实现下拉框变更后选中表格首行？

我看了你的代码，发现两个关键问题导致功能无法正常工作：一是局部视图的表格结构不符合规范，二是jQuery的load方法是异步操作，你当前的写法会在局部视图还未加载完成时就去查找表格元素，自然找不到目标行。下面是具体的修正方案：

1. 修复局部视图的表格结构 #

你的局部视图里把<tbody>放在了foreach循环内部，这会导致每一行数据都被单独的<tbody>包裹，既不符合HTML规范，也会干扰后续选择器的查找逻辑。应该把<tbody>提到循环外面，统一包裹所有表格行：

<table class="table" id="tbl">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(m => m.D)</th>
            <th>@Html.DisplayNameFor(m => m.R)</th>
            <th></th>
        </tr>
    </thead>
    <tbody> <!-- 将tbody移至循环外部 -->
        @foreach (var item in Model)
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.D)</td>
                <td>@Html.DisplayFor(modelItem => item.R)</td>
            </tr>
        }
    </tbody> <!-- 统一闭合tbody -->
</table>

2. 修改jQuery代码，利用load的回调函数 #

$('#SPartial').load()是异步操作，它会在后台请求局部视图的同时继续执行后续代码。你现在直接在load后调用find和addClass时，局部视图还没加载完成，#tbl元素还不存在，所以无法选中首行。

解决办法是使用load方法的回调函数，这个函数会在局部视图完全加载到页面后才执行：

$('#ABC').change(function () {
    let data = { abc: $('#ABC').val() };
    var url = '@Url.Action("Partial", "S")';
    $('#SPartial').load(url, data, function() {
        // 回调函数：局部视图加载完成后再执行选中逻辑
        $('#SPartial').find('#tbl tbody tr:first').addClass('select');
    });
});

这样就能确保表格完全渲染后，再去查找并选中首行数据。

父视图的代码无需修改，保持原样即可：

<div id="SPartial">
    @Html.RenderPartial("_Partial", Model);
</div>

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