如何为PHP循环生成的id递增select标签在JS循环中绑定onchange事件

存在的问题 #

• HTML规范要求页面ID全局唯一，你在PHP循环中重复生成了comments、resone、as三个相同ID的元素，会导致所有DOM选择逻辑失效
• JS中ID拼接逻辑完全错误：$('#part').html(text)是修改ID为part的元素的内部内容，不是拼接生成part1、part2这类动态选择器
• 循环内用var声明的迭代变量存在变量提升问题，change事件回调触发时拿到的永远是循环结束后的最终值
• 没有做select和对应回填输入框的绑定，原有逻辑不管修改哪个下拉框，都会往同一个输入框写值

修正后的PHP代码 #

<!-- 把comments移到循环外，不需要重复生成 -->
<div id="comments" hidden><?php echo $counts; ?></div>
<table>
  <tr>
    <th>Item</th>
    <th>Name</th>
    <th>Price</th>
    <th>Qty</th>
    <th>Total</th>
  </tr>
  <tr>
    <td>Discount</td>
  </tr>
  <?php
  $sql = "SELECT * FROM order_item WHERE order_id = {$edit['order_id']}";
  $rs = mysqli_query($con, $sql);
  $count = 1; 
  $counts = mysqli_num_rows($rs);
  while ($row = mysqli_fetch_assoc($rs)) { ?>
  <tr>
    <!-- 输入框ID改成动态生成，和下拉框序号对应 -->
    <td><input type="text" readonly="readonly" id="resone<?php echo $count; ?>"></td>
    <td><?php echo ucfirst(getProductNameFromId($con, $row['product_id']));?></td>
    <td><?php echo $row['rate']; ?></td>
    <td><?php echo $row['quantity']; ?></td>
    <td><?php echo $row['total']; ?></td>
    <td>
      <!-- 下拉框ID保持动态生成，新增统一class方便事件绑定 -->
      <select name="artist_<?php echo $count; ?>" id="part<?php echo $count; ?>" class="part-select">
        <option value="" disabled selected>Select Category</option>
        <option value="1">lawa</option>
        <option value="2">laaswa</option>
      </select>
    </td>
  </tr>
  <?php $count++; } ?>
</table>

修正后的JS代码（推荐事件委托方案，无需循环绑定，性能更高） #

$(function() {
  // 给table绑定委托事件，所有class为part-select的下拉框触发change时执行逻辑
  $('table').on('change', '.part-select', function() {
    // 获取当前触发事件的下拉框序号
    const index = $(this).attr('id').replace('part', '');
    // 获取选中值
    const display = $(this).find(':selected').val();
    // 回填到对应序号的输入框
    $(`#resone${index}`).val(display);
  })
})

如果你一定要用循环绑定的方案，也可以用以下写法：

$(function() {
  const row = parseInt(document.getElementById("comments").textContent);
  // 用let声明迭代变量解决闭包问题
  for (let i = 1; i <= row; i++) {
    $(`#part${i}`).change(function() {
      const display = $(this).find(":selected").val();
      $(`#resone${i}`).val(display);
    })
  }
})

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