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

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 从下拉列表中打印 selected 多个值。

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;
  }
}

问题是当我 select 从第一个值打印到文本框中时。但是我 select 来自第二个下拉列表的值第一个打印的值消失了，第二个下拉框的值被打印了。但我想保留所有内容，当我取消勾选时，我也想删除这个值。我该怎么做。

Answer 1

如果您接受重复值，则解决方案如下：我更新了您的 HTML 代码以满足您的需要，向您的下拉列表添加实际值而不是使用 "FirstName,LastName".

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<select id="checkOwner" multiple="multiple" onchange="copyValue()">
       <option value="John">John</option>
       <option value="Abeer">Abeer</option>
     </select>
    <br>

    <select id="checkMember" multiple="multiple" onchange="copyValue2()">
       <option value="Doe">Doe</option>
       <option value="Trump">Trump</option>
       <option value="Abeer">Abeer</option>
     </select>
    <br>
     <input type="text" name="mytextbox" id="mytextbox" size="200">

</body>

<script type="text/javascript">

function getOld(currentSelect)
{
  var x = [];
  for (var option of document.getElementById(currentSelect).options) {
   if (option.selected) {

       x.push(option.value);
     }
   }

   return x;
}

function copyValue() {

  x = getOld('checkMember');
  y = [];
  for (var option of document.getElementById('checkOwner').options) {
    if (option.selected) {
          y.push(option.value);
    }
    else
    {
        y = y.filter(value => value != option.value );
    }
  }
  x = x.concat(y);
   document.getElementById('mytextbox').value = x.join(' ');
}



function copyValue2() {
  x = getOld('checkOwner');
  y = [];
  for (var option of document.getElementById('checkMember').options) {
   if (option.selected) {
      y.push(option.value);
   }
    else
    {
        y = y.filter(value => value != option.value );
    }
  }
    x = x.concat(y);
   document.getElementById('mytextbox').value = x.join(' ');
}

</script>
</html>

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

Copy selected multiple values to the textbox from more than one drop down

javascript

checkboxlist

drop-down-menu