Question

我的目标是从文本字段输入文本替换select / option下拉列表中的泛型选项。我现在正在做什么不起作用，并显示为未定义。这是我的标记:(请包括一个香草javascript选项） HTML：

<input id="name1" type="text" placeholder="name here" onKeyUp="return change1(this)">
<input id="name2" type="text" placeholder="name here" onKeyUp="return change2(this)">

等

<h4>Choose person:</h4>
<select id="select1">
<option id="pers1" value="1">person</option>
<option id="pers2" value="2">person</option>

..还有其中几个

使用Javascript：

function change1(input){
 document.getElementById("pers1").text =
 input.text; }
function change2(input){
 document.getElementById("pers2").text =
 input.text; }

等

Answer 1

<script>
    function change1(input){
        document.getElementById("pers1").text = input.value; 
    }
    function change2(input){
        document.getElementById("pers2").text = input.value; 
    } 
</script>
<h4>Choose person:</h4>
<select id="select1">
    <option id="pers1" value="1">person</option>
    <option id="pers2" value="2">person</option>
</select>
<hr>
<input id="name1" type="text" placeholder="name here" onKeyUp="change1(this)">
<input id="name2" type="text" placeholder="name here" onKeyUp="change2(this)">

Answer 2

首先回答您的问题，因为您使用的是undefined，所以您获得了input.text。这可以使用.value属性来实现。阅读有关获取输入文本框here的价值的更多信息此外，您只需通过调整选项元素上的id即可通过单个函数实现此目的。

功能：

function change1(e) {
    document.getElementById("pers_" + e.id).text = document.getElementById(e.id).value;
}

HTML：

<input id="name1" type="text" placeholder="name1 here" onKeyUp="return change1(this)">
<input id="name2" type="text" placeholder="name2 here" onKeyUp="return change1(this)">
<select id="select1">
    <option id="pers_name1" value="1">person1</option>
    <option id="pers_name2" value="2">person2</option>
</select>

Here is a demo

通过上面的输入更改选择/选项通用文本

2 个答案: