jQuery select下拉框使用closest tr选择器选中异常问题求助

核心问题 #

this指向错误：在jQuery的$.ajax回调函数中，默认的this指向的是本次Ajax请求的配置对象，而非你点击的复选框DOM元素，因此$(this).closest('tr')无法定位到对应的行元素，后续给select赋值的操作自然不生效。

修复方案 #

提供三种常用修复方式，选任意一种即可：

方案1：提前缓存DOM元素指向 #

在发起Ajax请求前先把点击的复选框this存到变量里，回调里用缓存的变量操作：

$(document).on('click', '.check_box', function(){            
    var name = $(this).data('name');
    // 缓存当前点击的复选框元素
    var $currentCheckbox = $(this);
    $.ajax({
        type: 'POST',
        url: '/someactionhere/',
        data:{name:name},
        success: function(data){
            // 用缓存的元素查找对应行的select
            $currentCheckbox.closest('tr').find('.name').html(data);
        }
    });
});

方案2：使用ES6箭头函数 #

箭头函数不会创建自己的this，会继承外层作用域的this指向：

$(document).on('click', '.check_box', function(){            
    var name = $(this).data('name');
    $.ajax({
        type: 'POST',
        url: '/someactionhere/',
        data:{name:name},
        // 箭头函数继承外层的this（即点击的复选框）
        success: (data) => {
            $(this).closest('tr').find('.name').html(data);
        }
    });
});

方案3：指定Ajax回调的context参数 #

通过context配置项手动指定回调里的this指向：

$(document).on('click', '.check_box', function(){            
    var name = $(this).data('name');
    $.ajax({
        type: 'POST',
        url: '/someactionhere/',
        data:{name:name},
        // 指定回调的this为当前点击的复选框
        context: this,
        success: function(data){
            $(this).closest('tr').find('.name').html(data);
        }
    });
});

其他排查方向 #

如果修改后还是不生效，可以检查这两点：

• 打开浏览器控制台查看Ajax请求是否正常发起，接口响应是否成功，返回数据是否为预期的<option>标签字符串
• 确认当前复选框的DOM结构确实在<tr>标签内，且同个<tr>下存在class为name的select元素

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