如何为发票表单动态添加可触发数据填充的Select组件

1. 预加载商品数据到JS变量 #

页面加载时，将商品数据从PHP输出为JS全局数组，避免新增行时重复查询数据库：

// 缓存商品数据，方便动态生成Select时直接使用
const articulos = [
  <?php
    $comprobar_articulos = $Articulos->listararticulos("");
    $isFirst = true;
    while ($cliart = mysqli_fetch_array($comprobar_articulos)) {
      if (!$isFirst) echo ',';
      echo json_encode([
        'id' => $cliart['id'],
        'referencia' => $cliart['referencia'],
        'nombre' => $cliart['nombre'],
        // 替换为你实际的描述、价格字段名
        'descripcion' => $cliart['descripcion'],
        'precio' => $cliart['precio']
      ]);
      $isFirst = false;
    }
  ?>
];

2. 修改asignarReferencia函数，支持动态行 #

让函数能识别当前触发的Select所属行，自动填充对应行的描述和价格：

function asignarReferencia(event) {
  const selectElement = event.target;
  const rowIndex = selectElement.dataset.i;
  const selectedId = selectElement.value;

  if (!selectedId) return;

  // 匹配选中的商品数据
  const targetArticulo = articulos.find(item => item.id == selectedId);
  if (!targetArticulo) return;

  // 填充当前行的描述和价格输入框
  document.querySelector(`input[name="descripcion_${rowIndex}"]`).value = targetArticulo.descripcion;
  document.querySelector(`input[name="precio_${rowIndex}"]`).value = targetArticulo.precio;

  // 可在此触发行总计计算，比如调用sumarLinea相关逻辑
}

3. 修改anadir函数，动态生成带商品选项的Select #

替换原代码中生成"Referencia"输入框的部分，改为生成Select组件，同时修正原代码的引号错误、重复ID问题：

function anadir() {
  let contador = parseInt(document.getElementById('contador').value) + 1;
  $("input[name='contador']").val(contador);

  // 生成Select的选项HTML
  let selectOptions = '<option value="">Busqueda</option>';
  articulos.forEach(articulo => {
    selectOptions += `<option value="${articulo.id}">${articulo.referencia} ${articulo.nombre}</option>`;
  });

  // 构建新行HTML，修复重复ID、引号错误
  const $html = `<tr style="padding: 15px">
    <td class="delete-item-row">
      <ul class="table-controls">
        <li><a href="javascript:void(0);" class="delete-item" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle">
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="15" y1="9" x2="9" y2="15"></line>
            <line x1="9" y1="9" x2="15" y2="15"></line>
          </svg>
        </a></li>
      </ul>
    </td>
    <td class="rate">
      <select id="referenciaarticulo_${contador}" data-width="fit" name="referenciaarticulo_${contador}" data-i="${contador}" class="selectpicker form-control" data-size="3" data-live-search="true" style="width: 10px;" onchange="asignarReferencia(event)">
        ${selectOptions}
      </select>
    </td>
    <td class="description">
      <input type="text" class="form-control form-control-sm" placeholder="Descripción" name="descripcion_${contador}">
    </td>
    <td class="text-right qty">
      <input type="text" class="form-control form-control-sm sumarLinea" placeholder="Cantidad" name="cantidad_${contador}" data-i="${contador}" id="cantidadhoras${contador}">
    </td>
    <td class="rate">
      <input type="text" class="form-control form-control-sm sumarLinea" placeholder="Precio" name="precio_${contador}" data-i="${contador}" id="importeporhora${contador}">
    </td>
    <td class="text-right qty">
      <input type="text" class="form-control form-control-sm sumarLinea" placeholder="Dto" name="dto_${contador}" data-i="${contador}" id="dto${contador}" value="0">
    </td>
    <td class="text-right qty">
      <input type="text" class="form-control form-control-sm sumarLinea" placeholder="Total" name="importe_total_${contador}" data-i="${contador}" id="base${contador}" readonly onfocus="anadir()">
    </td>
  </tr>`;

  $(".item-table tbody").append($html);

  // 初始化新生成的selectpicker组件，确保样式和功能正常
  $(`#referenciaarticulo_${contador}`).selectpicker('refresh');

  deleteItemRow();

  // 保留原有的总计计算逻辑，注意将其中的固定ID改为动态匹配（如cantidadanterior需对应前一行）
  if (contador != 1) {
    // ... 原代码中的总计计算逻辑
  }
}

4. 修正初始行的Select绑定 #

将初始PHP生成的Select的onchange属性改为onchange="asignarReferencia(event)"，确保初始行也能正常触发填充逻辑：

echo '<select id="referenciaarticulo_1" data-width="fit"  name="referenciaarticulo_1" data-i="1"  class="selectpicker form-control" data-size="3" data-live-search="true" style="width: 10px;" onchange="asignarReferencia(event)">';

关键注意事项 #

• 避免重复ID：原代码中新增行的输入框ID为固定值（如cantidadhoras1），需改为动态ID（如cantidadhoras${contador}），否则会导致DOM选择器混乱。
• 动态组件初始化：使用bootstrap-select的selectpicker时，动态生成的Select必须调用selectpicker('refresh')才能正常渲染样式和功能。
• 数据缓存：一次性加载所有商品数据到JS变量，提升页面性能，避免重复数据库查询。

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