Question

此代码仅将选择标签值添加到输入中。

function myFunction(e) {
    document.getElementById("myid").value = e.target.value
}

我要添加文字。

此代码无效：

function myFunction(e) {
        document.getElementById("myid").value = e.target.text
    }

HTML代码：

<select onchange="myFunction(event)">
    <option value="">Please select...</option>
    <option value="0">Text 1</option>
    <option value="1">Text 2</option>
</select>
<input type="text" id="myid">

Answer 1

你想要这个。

我正在传递选择本身，并使用速记法获取文本内容

我还要测试以确保该字段不包含“请选择...”

function myFunction(sel) {
  document.getElementById("myid").value = sel.selectedIndex < 1 ? "" : sel.options[sel.selectedIndex].text; // or .textContent
}

<select onchange="myFunction(this)">
  <option value="">Please select...</option>
  <option value="0">Text 1</option>
  <option value="1">Text 2</option>
</select>
<input type="text" id="myid">

这是一个不引人注目的版本

document.getElementById("sel").addEventListener("change", function() {
  document.getElementById("myid").value = this.selectedIndex < 1 ? "" : this.options[this.selectedIndex].text; // or .textContent
})

<select id="sel">
  <option value="">Please select...</option>
  <option value="0">Text 1</option>
  <option value="1">Text 2</option>
</select>
<input type="text" id="myid">

Answer 2

使用e.target.options[e.target.selectedIndex].text获取选项文本值

function myFunction(e) {
        document.getElementById("myid").value = e.target.value === "" ? "" : e.target.options[e.target.selectedIndex].text
    }

<select onchange="myFunction(event)">
    <option value="">Please select...</option>
    <option value="0">Text 1</option>
    <option value="1">Text 2</option>
</select>
<input type="text" id="myid">

Answer 3

使用textContent，而不是传递事件，而使用this关键字传递元素

function myFunction(e) {
    document.getElementById("myid").value = e.options[e.selectedIndex].textContent
    }

<select onchange="myFunction(this)">
    <option value="">Please select...</option>
    <option value="0">Text 1</option>
    <option value="1">Text 2</option>
</select>
<input type="text" id="myid">

如何添加选择标签文本进行输入？

3 个答案: