将文本从表单 Select-Option 传递到文本输入字段

Question

我想在用户进行选择时将表单 Select-Option 的文本部分（不是值）传递给同一表单中的隐藏文本输入字段。

我已经探索了我在研究中发现的一些 java 和 PHP 'examples'，但其中 none 似乎对我有用。

我已经发布了表格的原始示例，看看是否有人可以引导我找到水。任何帮助都将不胜感激。

HTML

<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>

Answer 1

好吧，如果你想传递文本部分，你也应该将名称添加为值

---
code
---
<option value="Grapes">Grapes</option>
<option value="Strawberries">Strawberries</option>
---
code
---

Answer 2

这不像获取 selected 选项的值那么容易，它可以简单地检索为 selectElement.value，但一点也不难。

selectElement.options 将为您提供 select 元素内所有选项的数组。您会发现 selected 选项的索引为 selectElement.selectedIndex.

话虽如此，您可以像这样访问 selected 选项：selectElement.options[selectElement.selectedIndex].

最后，你可以这样得到text属性：selectElement.options[selectElement.selectedIndex].text

代码如下：

// 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>

将文本从表单 Select-Option 传递到文本输入字段

Pass the text from a form Select-Option to a text input field

javascript

php

forms