动态生成行的表格中jQuery Select同行输入框联动问题

问题描述 #

我创建了一个包含2行初始数据、支持动态添加行的表格，需求是：当用户选择某一行第一个单元格的下拉选择框时，该行最后一个单元格的输入框值同步为下拉框的选中值。

当前使用的JS代码仅对第一行生效，后续所有行都会重复第一行的同步值，无法实现每行独立联动：

$('#select_acount').on('change', function() {
  $('.mount').val($(this).val());
});

问题原因 #

• ID选择器局限性：#select_acount是唯一ID，仅能选中第一行的下拉框，后续行的下拉框没有该ID，无法触发事件。
• 全局选择器错误：$('.mount')会选中页面上所有带mount类的输入框，导致所有行的输入框被设置为同一个值。
• HTML规范问题：代码中重复使用fname、james等ID，违反HTML中ID必须唯一的规则，可能引发潜在问题。

解决方案 #

1. 修正HTML结构 #

• 移除所有重复ID（如fname、james、select_acount），改用类标识元素。
• 给所有下拉框添加统一类名（如row-select），方便绑定事件。
• 统一下拉框option的value值（原代码中第一行用acount_mounte，第二行用acount_name，需根据需求统一，示例中统一为acount_mounte）。

修正后的核心HTML片段：

<tr>
  <td>
    <select class="form-control select2 row-select" required>
      <option value="">--الحساب--</option>
      <?php
        $query = "select * from sah7atmain_acouts WHERE company like '".$multi."'";
        $result = mysqli_query($con,$query);
        if($result) {
          while($row = mysqli_fetch_assoc($result)){
      ?>   
        <option value="<?php echo $row['acount_mounte']; ?>"><?php echo $row['acount_name']; ?></option>
      <?php
          }
        }
      ?>
    </select>
  </td>
  <td>
    <input type="number" name="debtor[]" class="form-control quantity arabicNumbers" onkeydown="return event.keyCode !== 69" required>
  </td>
  <td>
    <input type="number" name="creditor[]" class="form-control amount arabicNumbers" onkeydown="return event.keyCode !== 69" required>
  </td>
  <td>
    <input type="text" name="description[]" class="form-control" required>
  </td>
  <td>
    <input type="text" name="mount[]" class="form-control mount" required>
  </td>
</tr>
<!-- 第二行及动态添加的行需保持相同结构，下拉框必须添加row-select类 -->

2. 修正JavaScript代码 #

使用事件委托绑定事件，确保动态添加的行也能触发联动逻辑。通过closest('tr')定位当前下拉框所在的行，再在该行内找到目标输入框，实现每行独立联动：

// 假设表格ID为transaction-table，可根据实际修改
$('#transaction-table').on('change', '.row-select', function() {
  // 获取当前下拉框所在的行
  const currentRow = $(this).closest('tr');
  // 在当前行内找到mount输入框并设置值
  currentRow.find('.mount').val($(this).val());
});

3. 动态添加行的注意事项 #

通过#add按钮添加新行时，生成的HTML结构必须与现有行一致：

• 新行的下拉框必须包含row-select类。
• 新行的输入框类名保持与现有行一致（如mount）。
• 确保下拉框的option值正确同步为需要传递的字段（如acount_mounte）。

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