jquery - 选择下拉列表时从行中获取相应的单元格值

Question

我有下表动态生成

代码如下

echo '
<tr>
  <td scope="row">'.$srNumberOa.'</td>
  <td>'.$check.'</td>
  <td>'.$numberOfDays.'</td>
  <td>'.$uph.'</td>
  <td>'.$numberOfUsefulHoursPerOa.'</td>
  <td>'.$numberOfPinsPerOa.'</td>
  <td>

    <div class="col-sm" id="">
      <select class="form-control" id="" name="">
        <option selected="selected"> </option>
        <option>Shift 1</option>
        <option>Shift 2</option>
        <option>Shift 3</option>
        <option>Shift 4</option>
      </select>
    </div>


  </td>

  <td>

    <input type="radio" name="currentOa">

  </td>
</tr>';

这里所有这些都是标签内的动态 php 变量<td>。

我想在选择的“ OA Shift”下拉列表中，警告或捕获“名称”和各自的单选按钮状态的值。例如，如果我更改序列号的“OA Shift”下拉列表：第 11 行，它应该警告或捕获名称为 X 和单选按钮为假。有人可以帮我怎么做吗？

编辑 1

请注意，我上面显示的表单是 Ajax 输出。所以所有这些值都来自另一个 php 页面。

标签： jqueryhtml

Answer 1

当您使用 jquery - 您可以change为您的选择添加一个处理程序：

$('select.form-control').on('change', function() {
    // find the parent `tr` for the `select`
    var tr = $(this).closest('tr');
    // `name` is the text of second `td`:
    var name = tr.find('td').eq(1).text();
    alert(name);
    // checkbox can be found by "name" attribute, for example:
    var cb = tr.find('input[name="currentOa"]');
    alert(cb.prop('checked'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table>
<tr>
  <td scope="row">11</td>
  <td>X</td>
  <td>1</td>
  <td>1</td>
  <td>1</td>
  <td>1</td>
  <td>
  <div class="col-sm" id="">
      <select class="form-control" id="" name="">
        <option selected="selected"> </option>
        <option>Shift 1</option>
        <option>Shift 2</option>
        <option>Shift 3</option>
        <option>Shift 4</option>
      </select>
    </div>


  </td>

  <td>

    <input type="radio" name="currentOa">

  </td>
</tr>
<tr>
  <td scope="row">22</td>
  <td>Y</td>
  <td>2</td>
  <td>2</td>
  <td>2</td>
  <td>2</td>
  <td>
  <div class="col-sm" id="">
      <select class="form-control" id="" name="">
        <option selected="selected"> </option>
        <option>Shift 1</option>
        <option>Shift 2</option>
        <option>Shift 3</option>
        <option>Shift 4</option>
      </select>
    </div>


  </td>

  <td>

    <input type="radio" name="currentOa">

  </td>
</tr>
</table>