JQuery选择下拉列表中最接近的tr选择[重复]

Question

希望有人可以提供建议。

我在尝试将某些数据添加到<option> 下拉列表中时遇到了小问题，我在单击表格中相同td 中的复选框后使用Ajax 获取它。

HTML：

<td class="col-lg-4"><select name="name[]" class="form-control name"></select>

现在是 JS：

$(document).on('click', '.check_box', function(){
            var name = $(this).data('name');
            $.ajax({
                type: 'POST',
                url: '/someactionhere/',
                data:{name:name},
                success: function(data){
                    $(this).closest('tr').find('.name').html(data);
                }
            });

});

我知道它应该非常简单，但对我来说看起来很合适。所以我不知道有没有问题。

有什么想法吗？

提前致谢。

Answer 1

在您的 ajax 函数中，$(this) 指的是 ajax 函数对象，而不是被点击的元素。要引用该元素，您需要首先将其存储在一个变量中，就像 cmets 建议的那样。

$(document).on('click', '.check_box', function() {
    var name = $(this).data('name');
    let elem = $(this)
    $.ajax({
        method: 'GET',
        url: 'https://jsonplaceholder.typicode.com/todos/1',
        data: {
            name: name
        },
        success: function(data) {
            elem.closest('tr').find('.name').html("<option>here is the html</option>");
        }
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td class="col-lg-4">
      <input type='checkbox' data-name='test' class='check_box' />
      <select name="name[]" class="form-control name">
      </select>
    </td>
  </tr>
</table>