动态填充 JavaScript 动态生成行中的文本框值-html教程-PHP中文网

动态填充 JavaScript 动态生成行中的文本框值

本文讲解如何使用事件委托解决动态添加的下拉框（select）无法触发 change 事件导致关联文本框无法自动填充的问题，核心是避免 ID 重复、改用 class 绑定 + $(document).on() 委托，并精准定位当前行表单元素。

本文讲解如何使用事件委托解决动态添加的下拉框（select）无法触发 change 事件导致关联文本框无法自动填充的问题，核心是避免 id 重复、改用 class 绑定 + `$(document).on()` 委托，并精准定位当前行表单元素。

在构建多行物料录入表单时，常需通过下拉选择原料编号（如 raw_material[]），再异步获取其单价、库存等数据并自动填入同行的文本框（如 unit_price、total_quantity）。但若使用 id="raw_material" 等静态 ID 为每行 select 赋值，将违反 HTML 唯一性规范——多个相同 ID 会导致 $('#raw_material').change(...) 仅绑定首个元素，后续动态生成的行完全失效。

✅ 正确方案：类名 + 事件委托 + 行级作用域定位

1. 统一使用 class 替代重复 id

将所有 select 和 input 元素的 id 属性移除（或仅保留在首行作参考），改用语义化 class：

<!-- 首行模板（仅用于初始化和克隆） -->
<select class="form-control raw_material" name="raw_material[]" required></select><input class="form-control unit_price" type="text" name="unit_price[]" required><input class="form-control total_quantity" type="text" name="total_quantity[]" required><input class="form-control total_cost_price" type="text" name="total_cost_price[]" required>

2. 使用事件委托监听动态元素

用 $(document).on('change', '.raw_material', ...) 替代 $('#raw_material').change(...)，确保新插入的 .raw_material 元素也能响应事件：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

$(document).ready(function() {
  // 初始化下拉选项（示例数据，实际应从 fetch_options.php 加载）
  const options = [
    { code: "RM001", material_name: "不锈钢板" },
    { code: "RM002", material_name: "铝合金型材" }
  ];
  options.forEach(opt => {
    $('.raw_material').append(`<option value="${opt.code}">${opt.material_name}</option>`);
  });

  // ✅ 关键：事件委托 —— 监听所有当前及未来 .raw_material 元素
  $(document).on('change', '.raw_material', function() {
    const $select = $(this);
    const selectedCode = $select.val();

    if (!selectedCode) return;

    // 模拟 AJAX 请求（生产环境替换为真实接口）
    // $.get('fetch_data.php', { id: selectedCode }, function(res) {
    //   populateRowFields($select, JSON.parse(res));
    // });

    // 示例返回数据（调试用）
    const mockData = {
      unit_price: 85.6,
      total_quantity: 1200,
      total_cost_price: 102720.00
    };
    populateRowFields($select, mockData);
  });
});

3. 精准填充当前行的文本框

利用 $(this).closest('tr') 定位事件触发元素所在行，再通过 class 查找目标 input 并赋值：

function populateRowFields($select, data) {
  const $row = $select.closest('tr'); // ✅ 锁定当前操作行
  $row.find('.unit_price').val(data.unit_price?.toFixed(2) || '');
  $row.find('.total_quantity').val(data.total_quantity || '');
  $row.find('.total_cost_price').val(data.total_cost_price?.toFixed(2) || '');
}

4. 动态添加行（修正版）

移除 id 属性，使用 class 构建新行，并复用首行 select 的选项内容：

function addRow() {
  const $table = $('#tblMaterial'); // 推荐用 ID 选择器替代 getElementsByTagName
  const $firstSelect = $('.raw_material').first();
  const optionsHtml = $firstSelect.html(); // 复用已加载的 option

  const newRowHtml = `
    <tr>
<td><select class="form-control raw_material" name="raw_material[]" required>${optionsHtml}</select></td>
      <td><input class="form-control quantity" placeholder="Batch Quantity" type="number" name="quantity[]" required></td>
      <td><input class="form-control total_cost_price" type="text" name="total_cost_price[]" required></td>
      <td><input class="form-control total_quantity" type="text" name="total_quantity[]" required></td>
      <td><input class="form-control unit_price" type="text" name="unit_price[]" required></td>
    </tr>`;

  $table.append(newRowHtml);
}