如何将下拉选定值分配给下一个 td 中存在的输入字段

Question

在一个表格中，我有两列和许多行。一列有下拉列表，另一列有类型为数字的输入字段。当我更改下拉列表的值时，我想将该选定值分配给下一个td中存在的输入字段。我希望我能很好地解释我的问题。

这是我尝试过的，

$(document).ready(function() {
  $('select.nameSelect').change(function() {
    var id = $(this).children("option:selected").val();
    $(this).closest('.tr').find('.StudentId').val(id);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select name="StudentName" id="StudentName" class="nameSelect">
        <option value="1">Student1</option>
        <option value="2">Student2</option>
        <option value="3">Student3</option>
        <option value="4">Student4</option>
      </select>
    </td>
    <td>
      <input type="number" class="StudentId" />
    </td>
  </tr>
  <tr>
    <td>
      <select name="StudentName" id="StudentName" class="nameSelect">
        <option value="1">Student1</option>
        <option value="2">Student2</option>
        <option value="3">Student3</option>
        <option value="4">Student4</option>
      </select>
    </td>
    <td>
      <input type="number" class="StudentId" />
    </td>
  </tr>
  <tr>
    <td>
      <select name="StudentName" id="StudentName" class="nameSelect">
        <option value="1">Student1</option>
        <option value="2">Student2</option>
        <option value="3">Student3</option>
        <option value="4">Student4</option>
      </select>
    </td>
    <td>
      <input type="number" class="StudentId" />
    </td>
  </tr>
</table>

Answer 1

首先，由于具有相同id的多个元素(id="StudentName"(，您的 HTML 是无效的。

但是你的代码不起作用的原因是因为你在应该closest('tr')的时候做了closest('.tr')，因为它是一个元素，而不是一个类。

此外，无需查找所选值...只需使用this.value

$(document).ready(function() {
  $('select.nameSelect').change(function() {
    $(this).closest('tr').find('.StudentId').val(this.value);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select name="StudentName" id="StudentName" class="nameSelect">
        <option value="1">Student1</option>
        <option value="2">Student2</option>
        <option value="3">Student3</option>
        <option value="4">Student4</option>
      </select>
    </td>
    <td>
      <input type="number" class="StudentId" />
    </td>
  </tr>
  <tr>
    <td>
      <select name="StudentName" id="StudentName" class="nameSelect">
        <option value="1">Student1</option>
        <option value="2">Student2</option>
        <option value="3">Student3</option>
        <option value="4">Student4</option>
      </select>
    </td>
    <td>
      <input type="number" class="StudentId" />
    </td>
  </tr>
  <tr>
    <td>
      <select name="StudentName" id="StudentName" class="nameSelect">
        <option value="1">Student1</option>
        <option value="2">Student2</option>
        <option value="3">Student3</option>
        <option value="4">Student4</option>
      </select>
    </td>
    <td>
      <input type="number" class="StudentId" />
    </td>
  </tr>
</table>