用户表格中Bootstrap下拉菜单修改状态时批量生效问题求助

我明白你现在遇到的问题——改一条用户状态，所有记录的状态跟着一起变，这确实挺闹心的😅 核心原因是你的jQuery选择器没有限定到当前操作的那一行/下拉容器，导致修改了全局的状态文本。下面给你一套具体的解决方案：

第一步：调整HTML结构（确保每个下拉菜单独立） #

首先要保证每条用户记录的下拉菜单都包裹在独立的.dropdown容器里，并且给每个状态选项加上用户ID的标识（方便后续更新数据库）：

<table class="table table-striped">
  <thead>
    <tr>
      <th>用户名</th>
      <th>邮箱</th>
      <th>状态</th>
    </tr>
  </thead>
  <tbody>
    <!-- 第一条用户记录 -->
    <tr>
      <td>张三</td>
      <td>zhangsan@example.com</td>
      <td>
        <div class="dropdown">
          <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            Active
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#" data-user-id="1">Active</a></li>
            <li><a class="dropdown-item" href="#" data-user-id="1">Inactive</a></li>
          </ul>
        </div>
      </td>
    </tr>
    <!-- 第二条用户记录 -->
    <tr>
      <td>李四</td>
      <td>lisi@example.com</td>
      <td>
        <div class="dropdown">
          <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            Inactive
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#" data-user-id="2">Active</a></li>
            <li><a class="dropdown-item" href="#" data-user-id="2">Inactive</a></li>
          </ul>
        </div>
      </td>
    </tr>
  </tbody>
</table>

第二步：修改jQuery代码（限定操作范围） #

关键是用closest()方法定位到当前点击选项所在的.dropdown容器，只修改这个容器内的下拉按钮文本，而不是全局修改：

// 给所有状态选项绑定点击事件
$('.dropdown-item').on('click', function(e) {
  e.preventDefault(); // 阻止默认跳转行为
  
  // 1. 获取当前点击的状态文本（比如"Active"或"Inactive"）
  const selectedStatus = $(this).text().trim();
  
  // 2. 找到当前操作的下拉容器，只修改这个容器里的按钮文本
  $(this).closest('.dropdown').find('.dropdown-toggle').text(selectedStatus);
  
  // 3. （可选）发送AJAX请求更新后端数据库
  const userId = $(this).data('user-id'); // 从data属性获取当前用户ID
  $.ajax({
    url: '/your-update-status-api', // 替换成你的后端接口地址
    method: 'POST',
    data: {
      user_id: userId,
      status: selectedStatus.toLowerCase() // 转成小写方便后端处理
    },
    success: function(res) {
      // 操作成功后的提示，比如弹出成功消息
      console.log('状态更新成功');
    },
    error: function(err) {
      console.error('状态更新失败', err);
    }
  });
});

为什么之前的方法没用？ #

你之前尝试的find()、siblings()没生效，大概率是因为没有先锁定当前操作的上下文范围——比如直接用$('.dropdown-toggle')会选中页面上所有的下拉按钮，而closest('.dropdown')可以帮你快速定位到当前点击选项所属的下拉容器，再在这个容器内找按钮，就不会影响其他行的状态了。另外，千万不要给多个下拉元素用同一个id，ID是全局唯一的，重复使用会导致选择器混乱。

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