本文介绍如何通过原生 JavaScript 获取 元素中用户选中的选项文本（而非 value 值），并实时同步至同表单内的文本输入框，适用于需同时提交选项值与可读文本的场景。
本文介绍如何通过原生 javascript 获取 `
在 Web 表单开发中，
正确做法是利用 DOM API 获取选中项的 text 属性。核心逻辑如下：
- 通过 document.getElementById() 或 querySelector 获取
- 监听 input 事件（推荐）或 change 事件，确保在用户选择后立即响应；
- 使用 selectElement.selectedIndex 获取当前选中项的索引；
- 通过 selectElement.options[index].text 提取对应
- 将该文本赋值给目标 的 value 属性。
以下是完整、可直接运行的实现代码：
<script>
const selectEl = document.getElementById('fruitSelector');
const inputEl = document.querySelector('.hiddenField');
selectEl.addEventListener('input', function() {
// 防止选中禁用选项（如初始提示项）
if (this.selectedIndex === 0) {
inputEl.value = '';
return;
}
const selectedText = this.options[this.selectedIndex].text;
inputEl.value = selectedText;
});
</script>
✅ 关键说明与注意事项：
- 使用 input 事件比 change 更及时（尤其在键盘导航或快速切换时也能捕获）；
- selectedIndex 为 0 时对应第一个
- 不依赖 jQuery 或后端语言（如 PHP/Java），纯前端实现，兼容所有现代浏览器；
- 若目标输入框需隐藏，可添加 type="hidden" 或 CSS display: none，不影响功能；
- 服务端接收时，$_POST['hiddenField'] 即为用户看到的水果名称（如 "Grapes"），而 $_POST['fruitSelector'] 仍为数字 ID（如 "1"），二者可协同使用。
此方案简洁、可靠，是表单增强体验的典型实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
