表单select关联数据库条目，DOMPDF生成PDF时如何分离多字段值？

原代码核心问题 #

1. 将descricao/valor/tipo拼接在select的value中，导致提交后productName[]接收混合字符串，拆分时易因特殊字符（如冒号）出错
2. 错误使用label标签存储值（label无value属性），无法正确传递数据
3. 未对输出的HTML内容做转义，存在XSS风险

方案一：前端用Data属性+隐藏Input存储多字段 #

通过HTML5的data-*属性存储额外字段，配合JavaScript动态更新隐藏输入框，提交后后端可直接获取拆分好的字段值。

前端代码

<div class="form-group">
  <div class="col">
    <select name="product_descricao[]" id="productName_1" class="form-control">
      <?php
      $result_cat_post = "SELECT descricao, valor, tipo FROM itens ORDER BY descricao asc";
      $resultado_cat_post = mysqli_query($conn, $result_cat_post);
      while ($row_cat_post = mysqli_fetch_assoc($resultado_cat_post)) {
          // 转义特殊字符避免HTML渲染错误
          $desc = htmlspecialchars($row_cat_post['descricao']);
          $valor = htmlspecialchars($row_cat_post['valor']);
          $tipo = htmlspecialchars($row_cat_post['tipo']);
          echo "<option value=\"{$desc}\" data-valor=\"{$valor}\" data-tipo=\"{$tipo}\">{$desc}</option>";
      }
      ?>
    </select>
    <!-- 隐藏输入框，用于提交时传递valor和tipo -->
    <input type="hidden" name="product_valor[]" id="order_item_preco_1">
    <input type="hidden" name="product_tipo[]" id="order_item_tipo_1">
  </div>
</div>

<script>
// 监听下拉框选择事件，更新隐藏输入框值
const select = document.getElementById('productName_1');
const valorInput = document.getElementById('order_item_preco_1');
const tipoInput = document.getElementById('order_item_tipo_1');

select.addEventListener('change', updateHiddenFields);
// 页面加载时初始化默认选中项的值
window.addEventListener('load', updateHiddenFields);

function updateHiddenFields() {
  const selectedOpt = select.options[select.selectedIndex];
  valorInput.value = selectedOpt.dataset.valor;
  tipoInput.value = selectedOpt.dataset.tipo;
}
</script>

后端处理

提交后直接从$_POST获取拆分后的字段数组：

// 批量提交场景下遍历获取每个条目数据
if (isset($_POST['product_descricao'], $_POST['product_valor'], $_POST['product_tipo'])) {
    foreach ($_POST['product_descricao'] as $index => $desc) {
        $valor = $_POST['product_valor'][$index];
        $tipo = $_POST['product_tipo'][$index];
        
        // DOMPDF输出示例
        $pdf->writeHTML("<p>描述：{$desc}</p>");
        $pdf->writeHTML("<p>数值：{$valor}</p>");
        $pdf->writeHTML("<p>类型：{$tipo}</p>");
    }
}

方案二：传递数据库ID，后端查询获取完整字段 #

这种方式更安全（避免前端数据篡改），无需处理特殊字符问题，适合对数据安全性要求高的场景。

前端代码

<div class="form-group">
  <div class="col">
    <select name="product_id[]" id="productName_1" class="form-control">
      <?php
      $result_cat_post = "SELECT id, descricao FROM itens ORDER BY descricao asc";
      $resultado_cat_post = mysqli_query($conn, $result_cat_post);
      while ($row_cat_post = mysqli_fetch_assoc($resultado_cat_post)) {
          $desc = htmlspecialchars($row_cat_post['descricao']);
          echo "<option value=\"{$row_cat_post['id']}\">{$desc}</option>";
      }
      ?>
    </select>
  </div>
</div>

后端处理

通过提交的ID查询数据库，获取完整字段：

$products = [];
// 预处理查询防止SQL注入
$stmt = $conn->prepare("SELECT descricao, valor, tipo FROM itens WHERE id = ?");

if (isset($_POST['product_id']) && is_array($_POST['product_id'])) {
    foreach ($_POST['product_id'] as $itemId) {
        $stmt->bind_param("i", $itemId);
        $stmt->execute();
        $result = $stmt->get_result();
        if ($row = $result->fetch_assoc()) {
            $products[] = $row;
        }
    }
}
$stmt->close();

// 生成PDF时遍历数据
foreach ($products as $prod) {
    $pdf->writeHTML("<p>描述：{$prod['descricao']}</p>");
    $pdf->writeHTML("<p>数值：{$prod['valor']}</p>");
    $pdf->writeHTML("<p>类型：{$prod['tipo']}</p>");
}

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