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

Posted 2023-05-08

【中文标题】JQuery选择下拉列表中最接近的tr选择[重复]

【英文标题】：closest tr selection in JQuery select dropdown [duplicate]

【发布时间】：2022-01-05 20:58:06

【问题描述】：

希望有人可以提供建议。

我在尝试将某些数据添加到<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);
                
            );

);

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

有什么想法吗？

提前致谢。

【问题讨论】：

success里面有$(this)吗？尝试将其写入控制台。在我看来，还有另一个范围，$(this) 与第 2 行不同。

它说：context: undefined

所以，这是对您问题的回答。我很擅长 jQuery，也许是 st。像第 3 行的var elem = $(this)？也许将任何元素标识符添加到被调用的 URL？

我觉得你可以把success: function(data)改成success: (data) => 。

@Rocky Sims 我尝试在成功中使用var ref = $(this) 然后ref.closest....，但仍然没有任何反应。

【参考方案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>

【讨论】：

您的回答绝对正确，对我来说很有意义。但也无法正常工作，我很困惑我确定我的代码没有任何问题。

我猜data 传递给成功处理程序不会以<option>/</option> 开始/结束。

@Rocky Sims 是的。

是的，这就是问题所在，还是它被包装在选项标签中？

没有没有。在尝试这个答案之前我已经删除了。但是等待复选框不在同一个td中，它在另一个td中