如何使用 JavaScript 动态为新增行的下拉框绑定事件并填充对应文本框-js教程-PHP中文网

如何使用 JavaScript 动态为新增行的下拉框绑定事件并填充对应文本框

本文详解如何解决动态添加的表单行中 select 元素无法触发 change 事件、导致关联文本框无法自动填充的问题，核心在于使用事件委托与唯一类名替代重复 id，并精准定位当前行内的目标输入框。

本文详解如何解决动态添加的表单行中 select 元素无法触发 change 事件、导致关联文本框无法自动填充的问题，核心在于使用事件委托与唯一类名替代重复 id，并精准定位当前行内的目标输入框。

在构建多行原材料录入表单时，常见做法是：首行通过 HTML 静态渲染，后续行由 JavaScript 动态插入。但若所有 <select></select> 和 <input> 元素均使用相同 id（如 id="raw_material"），不仅违反 HTML 规范（ID 必须唯一），更会导致 jQuery 的 $('#raw_material').change(...) 仅绑定到首个匹配元素，后续动态生成的下拉框完全失效。

根本解决方案是放弃 ID 绑定，改用语义化 class 名 + 事件委托（Event Delegation）。jQuery 的 $(document).on('event', selector, handler) 可监听当前及未来动态添加的匹配元素，完美适配动态表格场景。

✅ 正确实现步骤

统一使用 class 替代重复 ID
将所有下拉框设为 class="raw_material"，各文本框分别设为 class="total_quantity"、class="total_cost_price"、class="unit_price" 等。确保每行结构一致且无 ID 冲突。
动态添加行时复用初始 select 的 options
使用 document.getElementById('raw_material').innerHTML 获取已渲染的 <option></option> 内容（注意：此处 #raw_material 仅用于初始化，后续不再依赖其 ID 绑定事件），注入新行的 <select class="raw_material"></select> 中。
使用事件委托监听动态 select 的 change 事件

Java注释规范Skills
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载
```
$(document).on('change', '.raw_material', function() {
    const selectedCode = $(this).val();
    if (!selectedCode) return;

    // 发起 AJAX 请求获取数据（实际项目中替换为真实接口）
    $.get('fetch_data.php', { id: selectedCode }, function(response) {
        const data = JSON.parse(response);
        populateFormFields(data, $(this));
    });
});
```

精准定位当前行内的目标输入框
利用 $(this).closest('tr') 向上查找所在表格行，再通过 .find() 定位本行内对应 class 的输入框：

function populateFormFields(data, $select) {
    const $row = $select.closest('tr');
    $row.find('.total_quantity').val(data.total_quantity || '');
    $row.find('.total_cost_price').val(data.total_cost_price || '');
    $row.find('.unit_price').val(data.unit_price || '');
}

? 完整可运行示例（精简版）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="addRow">+ 添加原料行</button>

⚠️ 注意事项

严禁在循环中重复使用相同 ID：id 是全局唯一标识符，动态生成多行时必须用 class 或 data-* 属性代替。
避免内联 onchange 事件：如 onchange="populateTextbox(this)" 不仅耦合度高，且难以传递上下文，应统一由事件委托管理。
AJAX 错误处理不可省略：生产环境中需补充 error 回调，提示用户加载失败并清空字段。
性能优化建议：若行数极多（>100），可考虑将事件委托目标缩小至 $('#tblMaterial') 而非 $(document)，提升响应效率。