我明白你现在遇到的问题啦——每次切换下拉框的「是否会员」选项时，所有行的「会员编号」输入框都跟着变了，而你只想修改当前这一行的输入框值对吧？这是因为你的代码里没有精准定位到当前下拉框所在行的输入框，而且事件绑定的方式也有点冗余，我来帮你调整一下~

问题根源分析 #

• 你在添加行的循环中，重复给所有is_member[]下拉框绑定change事件，会导致同一个下拉框被绑定多次事件处理函数，造成不必要的性能损耗
• 事件处理函数中使用$("input[name='membership_number[]']")会选中页面上所有同名的输入框，所以触发时会批量修改所有行的值

修正后的解决方案 #

我们可以通过事件委托和精准DOM定位来解决这个问题，代码调整如下：

完整修正代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<table id="table_fields">
  <tr>
    <td></td>
    <td>Is Member</td>
    <td>Membership Number</td>
  </tr>

  <tr>
    <td class="firstcell">1</td>
    <td>
      <select name="is_member[]">
        <option value="">Select</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
      </select>
    </td>
    <td><input name="membership_number[]" value=""></td>
    <td></td>
  </tr>
</table>
<br><br>
<div class="text-center"><input type="button" name="add" id="add_row" class="btn btn-primary" value="Add Input Row" tabindex="-2"> </div>

<script>
var html_row = '<tr><td class="firstcell"></td><td><select name="is_member[]" ><option value="">Select</option><option value="Yes">Yes</option><option value="No">No</option></select></td><td><input name="membership_number[]" value=""></td><td><input type="button" name="remove" class="btn btn-info remove_row"  value="Remove This Section" tabindex="-1"></td></tr>';

var max = 50;
var x = 1;

// 事件委托：直接在表格上监听所有动态添加的下拉框change事件
$('#table_fields').on('change', 'select[name="is_member[]"]', function() {
  var member_status = $(this).val();
  // 定位当前下拉框所在的行，然后找到该行的会员编号输入框
  var targetInput = $(this).closest('tr').find('input[name="membership_number[]"]');
  if (member_status === "No") {
    targetInput.val("Not Member");
  } else {
    targetInput.val("");
  }
});

$('#add_row').click(function() {
  if (x <= max) {
    $('#table_fields').append(html_row);
    x++;
    // 简化行号设置：直接取所有firstcell的数量来设置当前行的序号
    var rowCount = $('.firstcell').length;
    $('.firstcell').last().text(rowCount);
  }
});

// 事件委托处理删除行
$('#table_fields').on('click', '.remove_row', function() {
  $(this).closest('tr').remove();
  x--;
  // 删除后重新更新所有行号
  $('.firstcell').each(function(index) {
    $(this).text(index + 1);
  });
});
</script>

关键调整点说明 #

• 事件委托优化：不再给每一个新增的下拉框单独绑定事件，而是直接在父容器#table_fields上绑定一次事件，监听所有动态生成的下拉框的change事件，既简洁又避免重复绑定
• 精准定位输入框：通过$(this).closest('tr')获取当前下拉框所在的表格行，再用.find()在该行内查找对应的会员编号输入框，确保只修改当前行的输入值
• 行号更新简化：新增和删除行时，直接遍历所有行号单元格更新序号，逻辑更清晰
• 删除按钮类名调整：把删除按钮的id="remove_row"改成类名.remove_row，因为ID在页面上必须唯一，动态生成多个相同ID会导致DOM问题

现在你可以测试一下：新增任意数量的行，切换某一行的「是否会员」下拉框，只会改变当前行的「会员编号」输入框值，其他行完全不受影响~

备注：内容来源于stack exchange，提问作者Dr M L M J