动态表格行中Select转Input功能仅首行生效的解决方法

问题根源 #

1. 重复ID冲突：新增行的代码里给每个select都设置了id="mylist"，但DOM中ID必须唯一，这会导致后续元素无法被正确识别。
2. 事件绑定范围局限：原代码用$('#mylist').change()直接绑定事件，仅对页面加载时已存在的第一个元素生效，动态生成的元素不会继承该事件。

修复方案 #

1. 修改新增行的HTML代码

移除新增行中select的id="mylist"属性，保留类名并新增一个标识类（如color-select），方便事件监听：

// 替换cell5的innerHTML部分，移除id="mylist"并新增color-select类
cell5.innerHTML = '<div class="form-group form-md-line-input"> <select class="form-control wrnbng color-select" name="wrnbng[]" required=""> <option value="">- Pilih Warna Benang -</option> <?php while($data4=mysqli_fetch_array($tb2)){ ?> <option value="<?php echo $data4['wrbenang'] ?>"><?php echo $data4['wrbenang']?></option> <?php } ?> </select></div>';

2. 使用事件委托绑定change事件

将事件绑定到表格的父容器（如tbody），利用事件冒泡机制处理所有动态生成元素的事件：

$(document).ready(function() {
  // 事件委托：监听tbody内所有.color-select类元素的change事件
  $('#bon tbody').on('change', '.color-select', function() {
    if ($(this).val() === 'Lainnya') {
      // 替换当前触发事件的select元素，避免全局选择器的冲突问题
      $(this).replaceWith('<input class="form-control wrnbng" name="wrnbng[]" required="" placeholder="Masukan Nama & Kode Benang">');
    }
  });
});

额外优化建议

• 若初始第一行的select也设置了id="mylist"，建议同步移除并添加color-select类，统一DOM结构避免冲突。
• 若替换后的input需要绑定额外事件（如自动补全），可在replaceWith后直接绑定，或继续通过事件委托处理。

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