如何POST下拉选框的显示文本而非value值

方案一：新增隐藏输入框存储显示文本（推荐） #

通过添加hidden类型的输入框同步下拉选框的显示文本，表单提交时提交该隐藏框的值，同时保留原input提交value。

修改后的代码：

<input type="text" id="usr" name="usr" required>
<!-- 新增隐藏输入框，用于提交显示文本 -->
<input type="hidden" id="st_text" name="st">

<select id="st" required>
  <option disabled selected>Select a category *</option>
  <option value="BXV0110YL">test1</option>
  <option value="THE440XYK">test2</option>
  <option value="ZXSA012YF">test3</option>
  <option value="UIY5411YU">test4</option>
  <option value="PE44750YX">test5</option>
  <option value="HSSX0125X">test6</option>
  <option value="HGGF0121D">test7</option>
  <option value="EXC9023DS">test8</option>
  <option value="K014VXC9M">test9</option>
  <option value="ELOOE01VW">test10</option>
  <option value="CPOIT012N">test11</option>
  <option value="ELOOE11VQ">test12</option>
</select>

$(document).ready(function(){
    $("#st").change(function() {
        const selectEl = this;
        // 获取选中项的value和文本
        const selectedValue = selectEl.value;
        const selectedText = selectEl.options[selectEl.selectedIndex].text;
        
        // 同步到input#usr
        $("#usr").val(selectedValue);
        // 同步到隐藏输入框
        $("#st_text").val(selectedText);
    });
});

说明：

• 表单提交时，usr字段提交下拉选框的value，st字段提交选中的显示文本
• 原下拉选框可移除name属性，避免提交多余value值干扰

方案二：表单提交前临时修改下拉选框的value #

在表单提交瞬间，将下拉选框的value替换为选中的显示文本，提交后可恢复原value（防止影响后续操作）。

修改后的代码：

<form>
    <input type="text" id="usr" name="usr" required>

    <select id="st" name="st" required>
        <option disabled selected>Select a category *</option>
        <option value="BXV0110YL">test1</option>
        <!-- 其他选项略 -->
    </select>
    <button type="submit">提交</button>
</form>

$(document).ready(function(){
    $("#st").change(function() {
        $("#usr").val(this.value);
    });

    // 监听表单提交事件
    $("form").submit(function() {
        const selectEl = $("#st")[0];
        // 保存原value
        const originalValue = selectEl.value;
        // 将value替换为显示文本
        selectEl.value = selectEl.options[selectEl.selectedIndex].text;
        
        // 延迟恢复原value，确保表单提交完成
        setTimeout(() => {
            selectEl.value = originalValue;
        }, 100);
        
        return true;
    });
});

说明：

• 提交瞬间修改value，后端接收到的st字段为显示文本，usr字段为原value
• 恢复原value的操作可选，若无需后续操作可省略

方案三：后端映射处理 #

如果前端无法修改，可在后端通过预设映射表将接收到的value转换为对应文本：

// 示例PHP代码
$valueToText = [
    "BXV0110YL" => "test1",
    "THE440XYK" => "test2",
    "ZXSA012YF" => "test3",
    // 补充其他选项的映射关系
];

$stValue = $_POST['st'];
$stText = $valueToText[$stValue] ?? '';

说明：

• 需要前后端维护一致的映射关系，新增选项时需同步更新映射表

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