如何在表格行下拉框变更时获取该行首个元素的客户ID值

你的代码存在两个关键问题，导致无法正确获取客户ID：

• 选择器层级错误：$(this).parent()指向的是下拉框所在的<td>，而.sorting类元素在同一行的另一个<td>中，这个查找范围不包含目标元素。
• 取值方法错误：<td>是普通文本容器，不是表单控件，不能用.val()获取内容，需使用.text()。

修正后的JavaScript代码如下：

$(document).ready(function() {
    $("#clients").on("change", ".option", function() {
        const option = this.value;
        // 先定位到当前下拉框所在的行，再查找该行内的.sorting元素
        const clientId = $(this).closest('tr').find('.sorting').text().trim();
        alert(clientId);
        
        // 以下是AJAX提交示例（可根据实际需求调整）
        // $.ajax({
        //     url: '你的接口地址',
        //     type: 'POST',
        //     data: {
        //         clientId: clientId,
        //         option: option
        //     },
        //     success: function(res) {
        //         console.log('提交成功', res);
        //     },
        //     error: function(xhr) {
        //         console.error('提交失败', xhr);
        //     }
        // });
    });
});

核心逻辑说明： #

• $(this).closest('tr')：从当前下拉框元素向上查找最近的<tr>父节点，锁定当前操作的行。
• .find('.sorting').text().trim()：在目标行内找到.sorting类的<td>，用.text()提取文本内容，.trim()去除多余空格确保ID格式正确。

修正后即可正常获取对应行的客户ID，后续可直接基于此编写AJAX提交逻辑。

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