本文介绍如何通过原生 JavaScript 获取 元素中用户选中的选项文本（而非 value 值），并实时同步至同表单内的文本输入框，适用于需同时提交选项值与可读文本的场景。
本文介绍如何通过原生 javascript 获取 `
在 Web 表单开发中，
正确做法是利用 DOM API 获取选中项的 text 属性。核心逻辑如下：
- 通过 document.getElementById() 或 querySelector 获取
- 监听 input 事件（推荐）或 change 事件，确保在用户选择后立即响应；
- 使用 selectElement.selectedIndex 获取当前选中项的索引；
- 通过 selectElement.options[index].text 提取对应
- 将该文本赋值给目标 的 value 属性。
以下是完整、可直接运行的实现代码：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<form action="fruitBasket.php" method="post" enctype="multipart/form-data">
<select id="fruitSelector" name="fruitSelector">
<option value="0" selected disabled>Select Fruit</option>
<option value="1">Grapes</option>
<option value="2">Strawberries</option>
<option value="3">Peaches</option>
<option value="4">Blueberries</option>
</select>
<br><br>
<input type="text" class="hiddenField" name="hiddenField" placeholder="Selected fruit appears here.">
</form>
<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"），二者可协同使用。
此方案简洁、可靠，是表单增强体验的典型实践。
