javascript - JS-选择新值后如何删除或替换文本区域中的文本值

Question

<强> Fiddle

我有一个文本区域和两个下拉菜单。每个下拉列表有 4 个可能的值。选择某个值后，其值将在文本区域中显示为文本。

我的问题是，如果您更改从下拉列表之一中选择的值，那么它只会将新值添加到文本区域，而不是替换之前选择的值。

有没有办法删除或替换文本区域中先前添加的值？

(并且不删除/替换从其他下拉列表中填充的值)

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

Is there a way of DELETING or REPLACING the previously added value within the 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>