Question

我有一个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

有没有办法在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';
  }

JS - 如何在选择新值后删除或替换textarea中的文本值

2 个答案: