JS - 如何在textarea的選擇新值後，移除或替換文本值

Question

Fiddle

我有一個textarea和兩個下拉菜單。每個下拉菜單都有4個可能的值。選擇一個值後，它的值將顯示爲textarea中的文本。

我的問題是，如果您更改從其中一個下拉列表中選擇的值，那麼它只是將新值添加到textarea，而不是替換先前選擇的值。

有沒有辦法刪除或替換之前在textarea中添加的值？

（和而不刪除/替換來自其它下拉填充的值）

var mytextbox = document.getElementById('mytext'); 
var mydropdown = document.getElementById('dropdown'); 

mydropdown.onchange = function(){ 
mytextbox.value = mytextbox.value + "\n" + this.value;mytextbox.rows = mytextbox.rows + 1;mytextbox.style.height = (mytextbox.rows * 30) + 'px'; 
} 

var mytextbox = document.getElementById('mytext'); 
var mydropdown = document.getElementById('dropdown2'); 

mydropdown.onchange = function(){ 
mytextbox.value = mytextbox.value + "\n" + this.value;mytextbox.rows = mytextbox.rows + 1;mytextbox.style.height = (mytextbox.rows * 30) + 'px'; 
} 

Answer 1

是否有DELETING的一種方式或textarea的內替換先前增值？

是對的方法是隻值分配給該文本框，無需追加或用舊的值連接，所以去掉mytextbox.value + "\n"部分：

mytextbox.value = mytextbox.value + "\n" + this.value; 

應該是：

mytextbox.value = this.value; 

希望這會有所幫助。

var mytextbox = document.getElementById('mytext'); 
 
var mydropdown1 = document.getElementById('dropdown'); 
 
var mydropdown2 = document.getElementById('dropdown2'); 
 
var mydropdown1_value = mydropdown1.value; 
 
var mydropdown2_value = mydropdown2.value; 
 

 
mydropdown1.onchange = function(){ 
 
    mydropdown1_value = mydropdown1.value; 
 

 
    mytextbox.value = mydropdown1_value + '\n' + mydropdown2_value; 
 
} 
 

 
mydropdown2.onchange = function(){ 
 
    mydropdown2_value = mydropdown2.value; 
 

 
    mytextbox.value = mydropdown1_value + '\n' + mydropdown2_value; 
 
}

<div class="expandingArea"> 
 
    <textarea id="mytext"></textarea> 
 
</div> 
 
<select id="dropdown"> 
 
    <option value="">None</option> 
 
    <option value="text1">text1</option> 
 
    <option value="text2">text2</option> 
 
    <option value="text3">text3</option> 
 
    <option value="text4">text4</option> 
 
</select> 
 
<select id="dropdown2"> 
 
    <option value="">None</option> 
 
    <option value="textA">textA</option> 
 
    <option value="textB">textB</option> 
 
    <option value="textC">textC</option> 
 
    <option value="textD">textD</option> 
 
</select>

Answer 2

只需要添加一行。將textarea設置爲空字符串，然後再替換該行以清空textarea。

mydropdown.onchange = function(){ 
    mytextbox.value = "" 
    mytextbox.value = mytextbox.value + "\n" + this.value;mytextbox.rows = mytextbox.rows + 1;mytextbox.style.height = (mytextbox.rows * 30) + 'px'; 
    }