如何使用jQuery点击按钮时获取当前行含选中<select>的所有值？

没问题，我来给你一步步讲清楚怎么实现这个需求～

首先咱们先模拟一个符合你场景的表格结构，比如每行包含普通文本、下拉选择框和操作按钮：

<table id="myTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>选项</th>
      <th>内容</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <select class="selectOption">
          <option value="a">选项a</option>
          <option value="b">选项b</option>
        </select>
      </td>
      <td>3</td>
      <td><button class="getRowBtn">获取行数据</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        <select class="selectOption">
          <option value="c">选项c</option>
          <option value="d">选项d</option>
        </select>
      </td>
      <td>6</td>
      <td><button class="getRowBtn">获取行数据</button></td>
    </tr>
  </tbody>
</table>

接下来是核心的jQuery代码，实现点击按钮时抓取当前行的所有值：

$(document).ready(function() {
  // 给所有操作按钮绑定点击事件
  $('.getRowBtn').click(function() {
    // 找到当前按钮所在的行
    const currentRow = $(this).closest('tr');
    // 用来存储行数据的数组
    const rowData = [];

    // 遍历当前行里的每个单元格（除了最后一个操作列，可根据需求调整）
    currentRow.find('td').not(':last').each(function() {
      // 检查当前单元格里有没有select元素
      const selectElem = $(this).find('select');
      if (selectElem.length > 0) {
        // 如果有select，就取它的选中值，按你要的格式加单引号
        rowData.push(`'${selectElem.val()}'`);
      } else {
        // 没有select的话，直接取单元格文本内容
        rowData.push($(this).text().trim());
      }
    });

    // 把数组转成你想要的格式输出，比如"1 'a' 3"
    const result = rowData.join(' ');
    console.log(result);
    // 也可以把结果展示到页面上，比如alert(result);
  });
});

代码关键点说明： #

• $(this).closest('tr')：这一步是核心，通过点击的按钮向上找到最近的<tr>元素，精准定位当前所在行，不会干扰其他行的数据。
• 单元格遍历逻辑：针对每行的单元格，先判断是否包含<select>，有则取选中值，无则取文本内容，完美覆盖你要的场景。
• 格式拼接：用join(' ')把收集到的数据拼成你期望的1 'a' 3样式，直接可用。

效果演示： #

当你点击第一行的“获取行数据”按钮，如果选中了“选项a”，控制台就会输出：1 'a' 3；如果切换选中“选项b”，则输出1 'b' 3，完全匹配你的需求～

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