本文介绍如何使用原生 JavaScript 将 元素中用户选中的选项可见文本（text）（而非 value 属性值）实时写入同一表单内的文本输入框，适用于需同时提交选项值与显示名的场景。
本文介绍如何使用原生 javascript 将 `
在 Web 表单开发中，
以下为完整、可直接运行的解决方案：
<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 中接收该文本。
⚠️ 注意事项：
- 若
- 避免对 .hiddenField 使用 type="hidden" —— 此处需用户可见以方便调试；如确需隐藏，可改用 type="hidden" 并移除 placeholder，但建议开发阶段保持可见；
- 若表单含多个同类下拉框，应通过唯一 ID 或 data 属性动态绑定，而非硬编码选择器。
此方案简洁、健壮且语义清晰，是处理“选项文本透传”需求的标准实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
