从多个下拉列表中将选择的多个值复制到文本框中

Question

我有如下的拖曳下拉菜单。

<select id="checkOwner"  multiple="multiple" onchange="copyValue1(this)">
       <option value="FirstName">First Name</option>
       <option value="SecondName">Last Name</option>
      </select>
      <select id="checkMember" multiple="multiple" onchange="copyValue2(this)>
       <option value="FirstName">First Name</option>
       <option value="SecondName">Last Name</option>
      </select>

我在下面的javascript中可以从下拉列表中选择多个值。

function copyValue() {

  var str = "";
  for (var option of document.getElementById('checkOwner').options) {
if (option.selected) {
  str+= option.value+" ";
}

document.getElementById('mytextbox').value = str;
  }
}

function copyValue2() {

  var str = "";
  for (var option of document.getElementById('checkMember').options) {
if (option.selected) {
  str+= option.value+" ";
}

document.getElementById('mytextbox').value = str;
  }
}

问题是，当我首先选择值时，该值会在文本框中显示。但是我从第二个下拉菜单中选择了值。第一个打印的值消失了，第二个下拉框的值被打印了。但我想保留所有。我该怎么做。

Answer 1

如果您接受重复的值，那么这是解决方案：