如何实现输入框显示键名，提交时传递对应值（不使用option标签）

当然可以实现这个需求！不用<option>标签也能做到输入框显示键名（比如Apple）、提交时传递对应值（abcde）的效果，我给你几个实用的方案：

方案1：隐藏输入框+只读显示框（最简洁可靠） #

这是最直接的方式，用一个隐藏的输入框负责提交真实值，另一个只读的输入框用来显示用户看到的键名：

<!-- 实际提交用的隐藏输入框，name和id完全符合你的要求 -->
<input type="hidden" id="section" name="section" value="abcde">
<!-- 显示给用户的输入框，设为只读防止修改，加个样式让它更像不可编辑状态 -->
<input type="text" value="Apple" readonly style="cursor: default; background-color: #f5f5f5;">

优点：不需要任何JavaScript，兼容性拉满，用户操作直观，完全不会出错。

方案2：单输入框+表单提交事件（无隐藏元素） #

如果不想用两个输入框，可以借助HTML的data-*属性和表单提交事件，在提交瞬间替换输入框的值：

<form>
  <input type="text" id="section" name="section" value="Apple" data-real-value="abcde" readonly>
  <button type="submit">提交</button>
</form>

<script>
// 监听表单提交事件，提交前替换值
document.querySelector('form').addEventListener('submit', function() {
  const input = document.getElementById('section');
  input.value = input.dataset.realValue;
});
</script>

说明：用户平时看到的是Apple，表单提交时会自动把值换成data-real-value里的abcde。如果不需要用户修改显示内容，记得保留readonly属性；如果允许用户修改显示文本但提交时仍用固定值，去掉readonly即可。

方案3：动态切换键值对（适合多选项场景） #

如果你的需求是需要在多个键值对之间切换（比如不止Apple一个选项），可以用JavaScript动态更新显示内容和提交值：

<input type="text" id="display-input" readonly>
<input type="hidden" id="section" name="section" value="">

<!-- 示例切换按钮 -->
<button onclick="switchKeyValue('Apple')">选Apple</button>
<button onclick="switchKeyValue('Banana')">选Banana</button>

<script>
// 定义所有键值对
const keyValueMap = {
  'Apple': 'abcde',
  'Banana': 'fghij'
};

// 切换选项的函数
function switchKeyValue(key) {
  document.getElementById('display-input').value = key;
  document.getElementById('section').value = keyValueMap[key];
}

// 页面加载时默认选中Apple
switchKeyValue('Apple');
</script>

这个方案适合有多个选项需要切换的场景，灵活性很高。

内容的提问来源于stack exchange，提问作者Ninja Warrior 11