如何将选择标签中的选项传递给另一个选择标签?

时间:2021-04-18 07:47:08

标签: javascript html

我在 select 标签中有一个选项列表,然后是一个将所选选项传递给其他 select 标签的元素。我的“选择”有多种形式,因此每个选项都显示为一行文本。我想要实现的是在我点击一个选项后,然后点击带有'onclick'功能的声明变量,该选项将传递给其他选择标签。

我的 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 />

1 个答案:

答案 0 :(得分:0)

非常简单的任务 - 只需从第一个下拉列表中获取当前选择的选项并在第二个选择中创建一个新选项:

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