如何将 select 标签中的选项传递给另一个 select 标签？

Question

I have a list of options in a select tag, then an element to pass a selected option to others select tag. My 'select' is in multiple forms so each option is displayed as a line of text. What I want to achieve is after I click on an option, then click on the declare variable with 'onclick' function, that option will be pass to others select tag.

My HTML:

<div class="container row" style="display:flex;" id="employeeTransfer">
   <label class="col-3 col-md-3 col-lg-3 col-sm-3 pb-sm-5 pb-5">Người nhận</label>
   <select id="employeeDisplay" class="col-3 col-lg-3 col-sm-3 form-control" multiple style="margin-left:12px;">
      <option id="1">Bùi Thị Bưởi</option>
      <option id="2">Tằm Thị Dâu</option>
      <option id="3">Cao Văn Bách</option>
   </select>
   <div class="col-1 col-md-1 col-lg-1 col-sm-1 pb-sm-5 pb-5">
      <ul style="list-style-type:none;margin:0;padding:0; padding-top:40%; padding-left:30%;">
         <li id="sendEmployee" onclick="processEmployee()">⫸</li>
         <li id="returnEmployee">⫷</li>
      </ul>
   </div>
   <select id="employeeProcess" class="col-3 col-md-3 col-lg-3 col-sm-3 pb-sm-5 pb-5 form-control" multiple>
   </select>
</div>
<br />

Answer 1

Very simple task - just take the currently selected option from the first drop-down and create a new option in the second select:

function processEmployee()
{
  var select_1 = document.getElementById('employeeDisplay');
  var select_2 = document.getElementById('employeeProcess');
  var option, i, j, found;

  for (i = 0; i < select_1.options.length; i++)
  {
    if (select_1.options[i].selected)
    {
      found = false;
      for (j = 0; j < select_2.options.length; j++)
      {
        if (select_2.options[j].value == select_1.options[i].value)
        {
          found = true;
          break;
        }
      }
      if(!found)
      {
        select_2.add(new Option(select_1.options[i].text,select_1.options[i].value));
      }
    }
  }
}