本文介绍如何在PHP+MySQL环境中，利用HTML <select> 的 data-* 属性存储数据库行数据，并通过原生JavaScript监听选择变化，实时将选中商品的描述和单价自动填入同一行的对应表格单元格中。
本文介绍如何在php+mysql环境中，利用html `
在构建报价单（Quote）、订单或采购单等业务表单时，常需实现“选择商品 → 自动带出描述、单价、库存等信息”的交互效果。这种需求无需页面刷新，应通过前端动态响应完成。以下是经过实践验证的轻量级、可扩展解决方案。
✅ 核心思路
- 后端（PHP）：查询商品表（如 addproducts），将关键字段（如 description、price_rate）作为 data-* 属性嵌入 <option> 标签；
- 前端（HTML + JavaScript）：为 <select> 绑定 change 事件，读取所选 <option> 的 data-description 和 data-price_rate，并写入对应 <span> 或 <input> 元素。
? 完整实现代码
1. HTML + PHP 模板（含数据注入）
<!-- 商品选择列 -->
<td>
<span contenteditable>
<div class="productSelect">
<select name="table_info" id="table_info">
<option value="" disabled selected>Click to See Products</option>
<?php
$records = mysqli_query($conn, "SELECT id, name, sku, description, price_rate, quantity FROM addproducts");
while ($data = mysqli_fetch_assoc($records)) {
echo '<option
value="' . htmlspecialchars($data['name']) . '"
data-sku="' . htmlspecialchars($data['sku']) . '"
data-price_rate="' . htmlspecialchars($data['price_rate']) . '"
data-description="' . htmlspecialchars($data['description']) . '"
data-quantity="' . htmlspecialchars($data['quantity']) . '">'
. htmlspecialchars($data['name']) .
'</option>';
}
?>
</select>
</div>
</span>
</td>
<!-- 描述列（只读展示，用 span） -->
<td>
<span contenteditable id="description"> </span>
</td>
<!-- 单价列（带前缀 R，仅内容可编辑） -->
<td>
<span data-prefix>R</span>
<span contenteditable id="price_rate"> </span>
</td>✅ 安全提示：使用 htmlspecialchars() 对输出到 HTML 的变量进行转义，防止 XSS 攻击；避免直接将 id 作为 value（易被篡改），此处改用更语义化的 name，实际业务中建议结合唯一 sku 或加密 ID。
2. 前端交互逻辑（纯 JavaScript）
<script>
document.addEventListener('DOMContentLoaded', function () {
const selectEl = document.getElementById('table_info');
const descEl = document.getElementById('description');
const rateEl = document.getElementById('price_rate');
selectEl.addEventListener('change', function () {
const selectedOption = this.options[this.selectedIndex];
// 提取自定义属性值
const description = selectedOption.getAttribute('data-description') || '';
const priceRate = selectedOption.getAttribute('data-price_rate') || '';
// 写入目标元素（保留 contenteditable 特性）
descEl.textContent = description.trim() || ' ';
rateEl.textContent = priceRate.trim() || ' ';
});
});
</script>? 增强说明：
- 使用 DOMContentLoaded 确保 DOM 加载完成后再绑定事件；
- textContent 替代 innerHTML 更安全（避免意外解析 HTML）；
- 用于维持空单元格高度，兼容 contenteditable 渲染；
- 若需支持多行商品（即表格有多行），请为每行 select 及对应字段添加唯一标识（如 id="desc-row-1"），并通过事件委托或循环初始化处理。
⚠️ 注意事项与进阶建议
- 性能考虑：当前方案适用于商品数量 ≤ 500 条；若数据量大，建议改用 AJAX 异步加载（如 Select2 + 后端搜索接口）；
- 数据一致性：data-* 属性仅作前端展示，提交表单时仍需通过 value（如商品 id 或 sku）传回后端校验，切勿仅依赖前端数据生成账单；
- 样式兼容性：contenteditable 在部分浏览器中对 span 的光标行为有差异，生产环境推荐统一用 <input> 或 <textarea> 并配合 CSS 控制外观；
- 可访问性（a11y）：为 <select> 添加 aria-label，并确保 data-* 字段在屏幕阅读器中可读（必要时用 aria-describedby 关联）。
掌握这一模式后，你可轻松扩展至自动填充 SKU、税率、单位、库存状态等任意字段——只需在 <option> 中增加对应 data-xxx 属性，并在 JS 中读取赋值即可。简洁、可靠、无第三方依赖，是 PHP 小型业务系统的理想实践。
