如何将HTML表单下拉选项的标签文本提交至WebAPI

方案一：前端提交时获取选中选项的文本值（推荐，适配联动场景） #

这种方式无需改动业务逻辑，直接在提交前替换下拉框的提交值为选项文本，适合依赖carservice.js实现州/城市联动的场景。

修改formtoapi.js的提交逻辑 #

假设你的下拉框HTML结构如下：

<select id="state" name="State">
  <option value="option1">Karnataka</option>
  <option value="option2">Maharashtra</option>
</select>
<select id="city" name="City">
  <option value="city1">Bangalore</option>
  <option value="city2">Mumbai</option>
</select>

在表单序列化/提交前，添加文本替换逻辑：

// 获取表单DOM
const form = document.getElementById('your-form-id');
// 初始化FormData
const formData = new FormData(form);

// 处理州下拉框
const stateSelect = document.getElementById('state');
const selectedStateText = stateSelect.options[stateSelect.selectedIndex].text;
formData.delete('State');
formData.append('State', selectedStateText);

// 处理城市下拉框
const citySelect = document.getElementById('city');
const selectedCityText = citySelect.options[citySelect.selectedIndex].text;
formData.delete('City');
formData.append('City', selectedCityText);

// 继续原有AJAX提交逻辑
fetch('/api/Forms', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.catch(error => console.error(error));

如果你的代码用serializeArray()序列化表单，可改成：

const formDataArray = $('#your-form-id').serializeArray();
formDataArray.forEach(item => {
  if (item.name === 'State') {
    item.value = $('#state option:selected').text();
  }
  if (item.name === 'City') {
    item.value = $('#city option:selected').text();
  }
});
// 用修改后的数组提交

方案二：直接修改HTML的Option Value为标签文本（仅适用于无联动场景） #

如果你的下拉框不需要动态联动（即选项固定），可以直接把option的value设置为标签文本，无需修改JS代码：

<select name="State">
  <option value="Karnataka">Karnataka</option>
  <option value="Maharashtra">Maharashtra</option>
</select>

注意：如果carservice.js依赖value值实现州/城市联动（比如用value作为关联ID加载城市列表），此方案不适用。

方案三：后端根据Value映射标签文本（适合需保留业务标识的场景） #

如果业务上需要保留value值（比如数据库存储州/城市的ID），但控制台需要显示文本，可在后端做映射处理：

1. 在FormsController中添加映射字典 #

private readonly Dictionary<string, string> _stateMapping = new()
{
    {"option1", "Karnataka"},
    {"option2", "Maharashtra"}
};

private readonly Dictionary<string, string> _cityMapping = new()
{
    {"city1", "Bangalore"},
    {"city2", "Mumbai"}
};

2. 在提交接口中替换文本 #

[HttpPost]
public IActionResult SubmitForm([FromBody] FormsDataModel model)
{
    // 替换州文本
    if (_stateMapping.TryGetValue(model.State, out var stateText))
    {
        model.State = stateText;
    }
    // 替换城市文本
    if (_cityMapping.TryGetValue(model.City, out var cityText))
    {
        model.City = cityText;
    }
    // 控制台输出修改后的数据
    Console.WriteLine($"提交信息：州={model.State}，城市={model.City}");
    return Ok();
}

注意事项 #

• 用方案一时，要确保下拉框在获取文本前已完成渲染（比如动态加载城市的carservice.js执行完毕后再处理提交逻辑）。
• 若表单有多个下拉框，可封装通用函数批量处理，避免重复代码。

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