如何实现表单输入显示物料名称但提交对应ID值？

这个场景我太熟悉了，默认的datalist确实会把option的value值显示在输入框里，刚好有几个实用的办法帮你实现「用户看名称、表单提交ID」的需求：

方案一：隐藏字段 + JavaScript监听（推荐，保留搜索体验） #

核心思路是用一个可见的输入框展示物料名称，再用一个隐藏字段存储要提交的ID，通过JS监听用户的选择行为来同步ID值。

代码实现： #

<!-- 可见输入框：用户输入/选择物料名称，仅用于展示和交互 -->
<input type="text" 
       list="materials" 
       name="material_name_display" 
       placeholder="Nazwa materiału" 
       autocomplete="off" 
       id="materialNameInput">

<datalist id="materials">
    @foreach($materials as $material)
        <!-- value设为物料名称（用户看到的内容），data-id存储实际要提交的ID -->
        <option value="{{$material->name}}" data-id="{{$material->id}}">{{$material->name}}</option>
    @endforeach
</datalist>

<!-- 隐藏字段：真正提交给后端的material_id，用户看不到 -->
<input type="hidden" name="material_id" id="materialIdInput">

<script>
    const nameInput = document.getElementById('materialNameInput');
    const idInput = document.getElementById('materialIdInput');
    const datalist = document.getElementById('materials');

    // 监听选择事件：当用户从datalist中选中选项时同步ID
    nameInput.addEventListener('change', syncMaterialId);
    // 监听输入事件：实时匹配选项，避免用户输入非选项内容时隐藏字段残留旧值
    nameInput.addEventListener('input', syncMaterialId);

    function syncMaterialId() {
        // 从datalist中找到与输入值匹配的选项
        const matchedOption = Array.from(datalist.options).find(opt => opt.value === this.value);
        // 如果找到匹配项，把ID赋值给隐藏字段；否则清空隐藏字段
        idInput.value = matchedOption ? matchedOption.dataset.id : '';
    }
</script>

为什么推荐这个方案？ #

• 保留了datalist的搜索提示功能，用户可以快速输入关键词找到物料
• 用户全程看到的都是物料名称，不会被ID混淆
• 后端接收的依然是material_id字段，不需要修改后端逻辑

方案二：用select标签（无JS，但无搜索功能） #

如果你的物料数量不多，不需要搜索功能，直接用select标签更简单——它天生支持「显示文本、提交value值」的逻辑：

<select name="material_id" placeholder="Nazwa materiału" required>
    <option value="">请选择物料</option>
    @foreach($materials as $material)
        <option value="{{$material->id}}">{{$material->name}}</option>
    @endforeach
</select>

局限性： #

• 没有输入搜索功能，物料多的时候用户需要下拉翻找，体验不如datalist
• 样式定制难度比输入框高一些

额外提醒 #

不管用哪个方案，都建议在后端添加验证：确保提交的material_id是存在的有效ID，避免恶意提交无效值。

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