基于递增Select ID动态控制输入框显示隐藏的问题

问题场景 #

在JS/HTML动态表格中，需要实现：

• 仅当下拉框选中「Other」选项时，显示该行对应的自定义输入框
• 保留所有行中「Other」选项的输入值（通过other[]数组提交）
• 当前问题：初始表格行功能正常，但新增表格行后，下拉框切换无法控制输入框的显示/隐藏

原代码 #

HTML结构 #

<table class="table table-bordered table-striped table-hover" id="myTable">
  <tr>
    <td>
      <select class="form-control select2" id="selectId_1" name="myvalue[]" required>
        <option value="val 1">.......</option>
        <option value="Other">Other</option>
      </select>
      <input type="text" class="form-control other" id="other_1" name="other[]" placeholder="other category">
    </td>
    <td><input autocomplete="off" class="form-control quantity" id="quantity_1" name="quantity[]" type="number"></td>
    <td>...</td>
  </tr>
</table>

仅对第一行有效的JS代码 #

$('[id^=selectId_]').each(function (i) {
  i++;
  $(this).change(function () {
    if( $(this).val()==="Other"){
      $('#other_'+i).show();
    } else {
      $('#other_'+i).hide()
    }
  });
});

问题根源 #

1. 事件绑定范围局限：原代码仅给页面初始加载时存在的下拉框绑定了change事件，动态新增的行没有触发绑定逻辑，所以功能失效。
2. ID依赖易出错：通过索引拼接ID的方式关联下拉框和输入框，新增行时索引计算容易出现偏差，且维护成本高。

修复方案 #

核心思路 #

• 使用事件委托：将事件绑定到表格（父容器）上，监听所有下拉框的change事件，包括后续动态新增的元素。
• 基于DOM结构关联元素：通过下拉框的同级元素查找对应的输入框，摆脱对ID命名规则的依赖。

修改后的JS代码 #

// 初始状态隐藏所有other输入框
$('.other').hide();

// 事件委托绑定到表格
$('#myTable').on('change', '.select2', function() {
  // 找到当前下拉框所在行的other输入框
  const otherInput = $(this).siblings('.other');
  if ($(this).val() === 'Other') {
    otherInput.show();
  } else {
    otherInput.hide();
  }
});

动态新增行的注意事项 #

新增表格行时，确保：

• 下拉框保留select2类名
• 自定义输入框保留other类名
• 表单元素的name属性保持数组格式（myvalue[]、other[]等），这样提交时能自动收集所有行的输入值

示例新增行的HTML结构（需保证与初始行结构一致）：

<tr>
  <td>
    <select class="form-control select2" name="myvalue[]" required>
      <option value="val 1">.......</option>
      <option value="Other">Other</option>
    </select>
    <input type="text" class="form-control other" name="other[]" placeholder="other category">
  </td>
  <td><input autocomplete="off" class="form-control quantity" name="quantity[]" type="number"></td>
  <td>...</td>
</tr>

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