javascript - 如何将选择框的文本显示到文本框？

Question

如何根据所选事件向每个文本框显示选择框的文本？ 我的代码仅显示选择框到文本框的值。我想用每个选项的文本替换它。

这是我的代码:

var selectBox = document.getElementById('mySelect');
var selectBox2 = document.getElementById('mySelect2');

selectBox.addEventListener('change', handleChange);
selectBox2.addEventListener('change', handleChange);
                           
function handleChange(event)
{
    if (event.target.id == "mySelect") {
      document.getElementById('myInput').value = selectBox.value;
    } else {
      document.getElementById('myInput2').value = selectBox2.value;
    }
}

<select id="mySelect">
    <option value="Option 1"> this Text</option>
    <option value="Option 2">this Text 2</option>
</select>
<select id="mySelect2">
    <option value="Option 1">this Text</option>
    <option value="Option 2">this Text 2 </option>
</select>


<input type="text" id="myInput" />
<input type="text" id="myInput2" />

Answer 1

您可以使用选择元素上的 selectedOptions[0].text 访问所选选项的标签。

var selectBox = document.getElementById('mySelect');
var selectBox2 = document.getElementById('mySelect2');

selectBox.addEventListener('change', handleChange);
selectBox2.addEventListener('change', handleChange);
                           
function handleChange(event)
{
    if (event.target.id == "mySelect") {
      document.getElementById('myInput').value = selectBox.selectedOptions[0].text;
    } else {
      document.getElementById('myInput2').value = selectBox2.selectedOptions[0].text;
    }
}

// Set initial values:
document.getElementById('myInput').value = selectBox.selectedOptions[0].text;
document.getElementById('myInput2').value = selectBox2.selectedOptions[0].text;

<select id="mySelect">
    <option value="Option 1"> this Text</option>
    <option value="Option 2">this Text 2</option>
</select>
<select id="mySelect2">
    <option value="Option 1">this Text</option>
    <option value="Option 2">this Text 2 </option>
</select>


<input type="text" id="myInput" />
<input type="text" id="myInput2" />