编辑后无法使用Javascript填充文本框

Question

我有一个简单的下拉框，并且当选择下拉项目时，我成功地使用Javascript自动填充文本框。

当我编辑任何文本框的自动填充文本或使用“清除”按钮擦除文本框时，下拉列表不再替换填充文本框。

用户更改文本框后，如何继续使用下拉框？

JSFiddle Version

HTML代码：

<select id="dropdown" onchange="preset();"> 
    <option value="">Select a person:</option> 
    <option value="Abe" >Abe</option> 
    <option value="Bob" >Bob</option> 
    <option value="Cal" >Cal</option> 
    <option value="Dan" >Dan</option> 
</select> 

<input type=Submit value="Clear" onclick="document.getElementById('mytext').value='';"> 

<textarea id="mytext"></textarea> 

Javascript代码：

function preset() { 
    document.getElementById("mytext").innerHTML=document.getElementById("dropdown").value 
} 

Answer 1

您使用innerHTML在一个地方，并value在另一个。在两个修补程序中使用value它。

Demo

Answer 2

更新提交按钮这样：

<input type=Submit value="Clear" onclick="document.getElementById('mytext').innerHTML='';">