动态表格选中other后显示额外输入框的功能修复求助

你的代码存在几个关键问题，导致无法实现需求，以下是问题分析和修正方案：

原代码核心问题 #

1. HTML重复ID违反规范：所有<select>和<input>的ID完全重复，jQuery无法准确选中目标元素
2. 未监听下拉变化事件：原JS仅在页面加载时执行一次，下拉选项改变时不会触发逻辑
3. 选中值判断错误：直接将jQuery对象与字符串"other"比较，永远不会相等，需用.val()获取选中值
4. 错误操作无关输入框：原代码中错误操作了Postal_multiply输入框，而非需求中的insurer_multi_add

修正方案（推荐使用Class选择器，更适配动态表格） #

修正后的HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="col col-1">
      <select class="small insurer_multi" name="insurer_multi[]" data-timsupport="dropdown" data-timdatasource="insurer" data-timdisplaytype="label" index="field1">
        <option value="noother">noother</option>
        <option value="other">other</option>
      </select>
      <input type="text" class="small insurer_multi_add" data-timsupport="number" data-timnumberofdigits="0" name="insurer_multi_add[]" style="display:none;" />
    </td>
  </tr>
  <tr>
    <td class="col col-1">
      <select class="small insurer_multi" name="insurer_multi[]" data-timsupport="dropdown" data-timdatasource="insurer" data-timdisplaytype="label" index="field1">
        <option value="noother">noother</option>
        <option value="other">other</option>
      </select>
      <input type="text" class="small insurer_multi_add" data-timsupport="number" data-timnumberofdigits="0" name="insurer_multi_add[]" style="display:none;" />
    </td>
  </tr>
  <tr>
    <td class="col col-1">
      <select class="small insurer_multi" name="insurer_multi[]" data-timsupport="dropdown" data-timdatasource="insurer" data-timdisplaytype="label" index="field1">
        <option value="noother">noother</option>
        <option value="other">other</option>
      </select>
      <input type="text" class="small insurer_multi_add" data-timsupport="number" data-timnumberofdigits="0" name="insurer_multi_add[]" style="display:none;" />
    </td>
  </tr>
</table>

• 给下拉框和输入框添加专属Class，避免ID重复问题
• 将表单name改为数组格式，方便后台接收多行数据
• 默认隐藏输入框，符合初始状态需求

修正后的jQuery代码

// 封装显示/隐藏逻辑函数
function toggleOtherInput($select) {
  const $input = $select.siblings('.insurer_multi_add');
  if ($select.val() === 'other') {
    $input.show();
  } else {
    $input.hide();
    $input.val(''); // 可选：切换非other选项时清空输入框内容
  }
}

// 页面加载时初始化所有下拉框状态
jQuery('.insurer_multi').each(function() {
  toggleOtherInput(jQuery(this));
});

// 监听下拉框变化，实时触发显示/隐藏
jQuery('.insurer_multi').on('change', function() {
  toggleOtherInput(jQuery(this));
});

• 用.siblings()快速定位当前下拉框对应的输入框，无需处理索引
• 同时处理页面初始化和下拉变化两种场景，确保状态同步

备选方案（保留原ID带索引的格式） #

如果必须使用insurer_multi[0]这类ID格式，可使用以下代码：

修正后的HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="col col-1">
      <select class="small" id="insurer_multi[0]" name="insurer_multi[0]" data-timsupport="dropdown" data-timdatasource="insurer" data-timdisplaytype="label" index="field1">
        <option value="noother">noother</option>
        <option value="other">other</option>
      </select>
      <input type="text" id="insurer_multi_add[0]" data-timsupport="number" data-timnumberofdigits="0" name="insurer_multi_add[0]" class="small" style="display:none;" />
    </td>
  </tr>
  <tr>
    <td class="col col-1">
      <select class="small" id="insurer_multi[1]" name="insurer_multi[1]" data-timsupport="dropdown" data-timdatasource="insurer" data-timdisplaytype="label" index="field1">
        <option value="noother">noother</option>
        <option value="other">other</option>
      </select>
      <input type="text" id="insurer_multi_add[1]" data-timsupport="number" data-timnumberofdigits="0" name="insurer_multi_add[1]" class="small" style="display:none;" />
    </td>
  </tr>
  <tr>
    <td class="col col-1">
      <select class="small" id="insurer_multi[2]" name="insurer_multi[2]" data-timsupport="dropdown" data-timdatasource="insurer" data-timdisplaytype="label" index="field1">
        <option value="noother">noother</option>
        <option value="other">other</option>
      </select>
      <input type="text" id="insurer_multi_add[2]" data-timsupport="number" data-timnumberofdigits="0" name="insurer_multi_add[2]" class="small" style="display:none;" />
    </td>
  </tr>
</table>

修正后的jQuery代码

function toggleOtherInput(index) {
  const $select = jQuery(`#insurer_multi[${index}]`);
  const $input = jQuery(`#insurer_multi_add[${index}]`);
  if ($select.val() === 'other') {
    $input.show();
  } else {
    $input.hide();
    $input.val('');
  }
}

// 初始化并绑定事件
jQuery('[id^="insurer_multi["]').each(function() {
  const thisId = jQuery(this).attr('id');
  const index = thisId.substring(thisId.indexOf('[') + 1, thisId.indexOf(']'));
  
  toggleOtherInput(index);
  
  jQuery(this).on('change', function() {
    toggleOtherInput(index);
  });
});

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