本文介绍如何使用原生 JavaScript 将 <select> 元素中用户选中的选项可见文本（text）（而非 value 属性值）实时写入同一表单内的文本输入框，适用于需同时提交选项值与显示名的场景。
本文介绍如何使用原生 javascript 将 `
在 Web 表单开发中，<select> 元素常用于提供预设选项，其 <option> 标签同时包含 value（提交值）和文本内容（用户可见标签）。有时后端需要原始显示文本（如“Grapes”），而不仅限于 value="1" 这类标识符。此时，仅靠 select.value 无法获取文本内容——它返回的是 value 属性值；必须通过 options 集合与 selectedIndex 定位当前选中项，再读取其 .text 属性。
以下为完整、可直接运行的解决方案：
<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('change', function() {
// 获取选中 option 的文本内容（非 value）
const selectedIndex = selectEl.selectedIndex;
const selectedText = selectEl.options[selectedIndex].text;
// 写入目标文本框（支持空选项，如 disabled 的提示项）
inputEl.value = selectedIndex === 0 ? '' : selectedText;
});
</script>✅ 关键说明：
- 使用 'change' 事件（而非 'input'）更符合语义：下拉框仅在用户明确切换选项时触发，避免冗余执行；
- 显式判断 selectedIndex === 0 可防止“Select Fruit”这类禁用提示项被误填入文本框；
- 不依赖 jQuery 或外部库，纯原生 JavaScript，兼容所有现代浏览器；
- 文本框保留 name="hiddenField"，确保提交时可通过 $_POST['hiddenField'] 在 PHP 中接收该文本。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 若 <select> 初始无选中项（无 selected 属性），selectedIndex 默认为 0，需结合逻辑校验；
- 避免对 .hiddenField 使用 type="hidden" —— 此处需用户可见以方便调试；如确需隐藏，可改用 type="hidden" 并移除 placeholder，但建议开发阶段保持可见；
- 若表单含多个同类下拉框，应通过唯一 ID 或 data 属性动态绑定，而非硬编码选择器。
此方案简洁、健壮且语义清晰，是处理“选项文本透传”需求的标准实践。
