将文本从表单选择选项传递到文本输入字段
[英]Pass the text from a form Select-Option to a text input field
问题描述
I would like to pass the text portion (not the value) of a form Select-Option to a hidden text-input field within the same form when the user makes a selection.
当用户进行选择时，我想将表单 Select-Option 的文本部分（而不是值）传递给同一表单中的隐藏文本输入字段。
I have explored some java and PHP 'examples' I found in my research, but none of them seem to work for me.我已经探索了一些我在研究中发现的 java 和 PHP “示例”，但它们似乎都不适合我。
I have posted a raw example of the form to see if anyone can lead me to water.我已经发布了表格的原始示例，看看是否有人可以带我去水。 Any help wouold be appreciated.任何帮助将不胜感激。
HMTL HMTL
<html>
<head>
</head>
<body>
<form action="fruitBasket.php" method="post" enctype="multipart/form-data">
<select id="fruitSelector" name="fruitSelector">
<option value="0" selected="selected" disabled="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>
</body>
</html>
2 个解决方案
解决方案1
1 已采纳 2022-05-31 20:46:35
It's not as easy as getting the selected option's value, which can be retrieved simply as selectElement.value , yet it's not difficult at all.这不像获取所选选项的值那么容易，可以简单地检索为selectElement.value ，但一点也不难。
selectElement.options will give you an array of ALL the options inside the select element. selectElement.options将为您提供选择元素内所有选项的数组。 You will find the selected option's index to be selectElement.selectedIndex .您会发现所选选项的索引是selectElement.selectedIndex 。
With that said, you can access to the selected option like this: selectElement.options[selectElement.selectedIndex] .话虽如此，您可以像这样访问所选选项： selectElement.options[selectElement.selectedIndex] 。
Finally, you can get the text property like this: selectElement.options[selectElement.selectedIndex].text最后，你可以像这样得到text属性： selectElement.options[selectElement.selectedIndex].text
Here's the code:这是代码：
// THIS CONSTANT REPRESENTS THE <select> ELEMENT const theSelect = document.getElementById('fruitSelector') // THIS LINE BINDS THE input EVENT TO THE ABOVE select ELEMENT // IT WILL BE EXECUTED EVERYTIME THE USER SELECTS AN OPTION theSelect.addEventListener('input', function() { // THIS IS HOW YOU GET THE SELECTED OPTION'S TEXT let selectedOptText = theSelect.options[theSelect.selectedIndex].text // FINALLY, THIS COPIES THE ABOVE TEXT TO THE INPUT ELEMENT: document.querySelector('.hiddenField').value = selectedOptText; })
<form action="fruitBasket.php" method="post" enctype="multipart/form-data"> <select id="fruitSelector" name="fruitSelector"> <option value="0" selected="selected" disabled="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>
解决方案2
0 2022-05-31 19:57:20
well if you want to pass the text portion you should add the names as the values too like好吧，如果你想传递文本部分，你应该添加名称作为值太喜欢
---
code
---
<option value="Grapes">Grapes</option>
<option value="Strawberries">Strawberries</option>
---
code
---
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.