如何让Formsubmit捕获下拉选择菜单的显示文本而非值？

安全阿岳

2026-7-15

解决Formsubmit下拉菜单仅提交Value值的问题

问题根源

表单提交时，下拉框默认会发送选中<option>的value属性值，你当前的选项value设为了数字（1-16），所以邮箱里收到的是数字而非显示文本。

方案一：直接修改Option的Value值（最简单）

把每个<option>的value替换成对应的显示文本，Formsubmit就会直接提交文本内容：

<select class="form-select select-control" data-width="auto" aria-placeholder="" name="type of work" required>
    <option selected disabled>Select A Category</option> <!-- 加disabled避免选中默认选项提交空值 -->
    <option class="select-control" value="CCTV / Alarm Systems">CCTV / Alarm Systems</option>
    <option class="select-control" value="Desktop/Laptop">Desktop/Laptop</option>
    <option class="select-control" value="Fiber Cabling">Fiber Cabling</option>
    <!-- 其他选项以此类推，将value改为和显示文本一致 -->
</select>

方案二：用JavaScript同步选中文本到隐藏字段（保留数字Value场景）

如果需要保留数字value用于其他逻辑，可添加隐藏输入框，在表单提交前把选中的文本赋值给它：

在表单内添加隐藏字段：

<input type="hidden" name="type of work text" id="work-type-text">

在</body>标签前插入JavaScript代码：

<script>
document.querySelector('form').addEventListener('submit', function() {
    const selectBox = document.querySelector('select[name="type of work"]');
    const selectedText = selectBox.options[selectBox.selectedIndex].text;
    document.getElementById('work-type-text').value = selectedText;
});
</script>

提交后邮箱会同时收到数字value（字段名type of work）和显示文本（字段名type of work text）。