将列表框中的选定行复制到另一个列表框

是一个常见的前端开发需求，可以通过以下步骤实现：

获取源列表框中被选中的行的数据。
- 使用JavaScript的DOM操作，可以通过document.getElementById或document.querySelector等方法获取源列表框的元素。
- 使用列表框的selectedIndex属性获取选中行的索引。
- 使用列表框的options属性获取所有选项。
- 遍历选项，判断是否被选中，如果是则获取该选项的值或文本。

创建新的选项并添加到目标列表框中。
- 使用JavaScript的DOM操作，可以通过document.createElement方法创建新的选项元素。
- 使用列表框的add方法将新的选项添加到目标列表框中。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>复制列表框中的选定行</title>
</head>
<body>
  <select id="sourceListBox" multiple>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
    <option value="4">选项4</option>
    <option value="5">选项5</option>
  </select>

  <select id="targetListBox" multiple></select>

  <button onclick="copySelectedRows()">复制选定行</button>

  <script>
    function copySelectedRows() {
      var sourceListBox = document.getElementById("sourceListBox");
      var targetListBox = document.getElementById("targetListBox");

      // 获取选中行的数据
      var selectedOptions = [];
      for (var i = 0; i < sourceListBox.options.length; i++) {
        if (sourceListBox.options[i].selected) {
          selectedOptions.push(sourceListBox.options[i]);
        }
      }

      // 复制选中行到目标列表框
      for (var i = 0; i < selectedOptions.length; i++) {
        var option = document.createElement("option");
        option.value = selectedOptions[i].value;
        option.text = selectedOptions[i].text;
        targetListBox.add(option);
      }
    }
  </script>
</body>
</html>

这段代码演示了如何将源列表框中选定的行复制到目标列表框中。用户可以通过多选或按住Ctrl键进行多选，然后点击"复制选定行"按钮即可实现复制操作。

这个功能在很多场景中都有应用，比如在电商网站中，用户可以通过选中商品列表中的商品，然后将选中的商品添加到购物车列表中。在博客管理系统中，用户可以选中文章列表中的文章，然后将选中的文章添加到待发布列表中。

腾讯云相关产品和产品介绍链接地址：