本文介绍一种利用事件委托与 disabled 属性结合 CSS 控制的健壮方案，解决动态添加表格行后下拉框联动显示/隐藏对应“Other”输入框失效的问题，兼容新增行且无需重复绑定事件。
本文介绍一种利用事件委托与 disabled 属性结合 css 控制的健壮方案，解决动态添加表格行后下拉框联动显示/隐藏对应“other”输入框失效的问题，兼容新增行且无需重复绑定事件。
在构建动态表单（如带“Other”选项的多行选择表格）时，常见需求是：当某行的 <select></select> 选中 "Other" 时，才显示该行专属的文本输入框；否则隐藏。若直接为每个 <select></select> 单独绑定 change 事件（如使用 $('[id^=selectId_]').each(...)），则新插入的行因未执行初始化逻辑而无法响应——这是典型的静态事件绑定不适用于动态 DOM 的问题。
推荐采用事件委托（Event Delegation） 方式，将监听器绑定到父容器（如 <table id="myTable"> 或 <code><form></form>），统一捕获所有子级 <select></select> 的 change 事件，并通过 event.target 精准识别触发源。关键在于：不依赖 ID 计数，而是利用 data-id 属性建立 select 与对应 input 的映射关系。
✅ 推荐实现方案
-
HTML 结构优化：为每个
<select></select>添加data-id="N"属性（如data-id="1"），与其关联的<input>的id和name保持一致编号（如id="other_1"）； -
初始状态控制：所有
.other输入框默认设置disabled属性（而非style="display:none"），既语义清晰，又便于 CSS 控制可见性； -
CSS 隐藏策略：
input.other:disabled { display: none; }此方式比 JS 操作
show()/hide()更轻量，且天然支持表单提交时自动排除禁用字段； -
JS 事件委托逻辑：
$('#myTable').on('change', 'select[name="myvalue[]"]', function (e) { const $select = $(e.target); const rowId = $select.data('id'); // 获取 data-id="1", "2", ... const $otherInput = $(`#other_${rowId}`); $otherInput.prop('disabled', $select.val() !== 'Other'); });
? 注意：使用
.on('change', 'selector', handler)是 jQuery 中标准的事件委托写法；$select.data('id')自动解析data-id属性值（无需手动取dataset.id）；.prop('disabled', bool)比.attr()更准确控制布尔属性状态。
✅ 动态新增行示例（可选扩展）
当通过 JS 动态追加新行时，只需确保新 <select></select> 包含正确的 data-id，且新 <input> 具有匹配的 id="other_X"，上述委托逻辑将自动生效，无需额外初始化：
function addNewRow(nextId) {
const newRow = `
<tr>
<td>
<select class="form-control select2" id="selectId_${nextId}"
data-id="${nextId}" name="myvalue[]" required>
<option value="val 1">.......</option>
<option value="Other">Other</option>
</select>
<input type="text" class="form-control other" id="other_${nextId}"
name="other[]" placeholder="other category" disabled>
</td>
<td><input class="form-control quantity" name="quantity[]" type="number"></td>
<td>...</td>
</tr>`;
$('#myTable').append(newRow);
}⚠️ 注意事项总结
- 避免使用
id前缀遍历 + 手动计数（如i++），易出错且不适应动态场景； - 不要依赖
id字符串拼接做 DOM 查找（如$('#other_'+i)），应改用data-id显式声明关系； -
disabled属性不仅控制 UI 显示，还影响表单提交行为（被禁用字段不会被提交），符合业务语义； - 若需在提交前校验“Other”输入框必填，应在
submit事件中动态启用并验证，而非移除disabled。
此方案简洁、可维护、完全支持动态增删行，是处理同类交互问题的最佳实践。
