如何使用javascript函数单击按钮将多个值从选择列表框添加到另一个列表框？

Question

我想从第一个列表中选择多个值，然后在单击按钮上将这些值添加到第二个列表中。我该如何编写这样的函数？

＆＃13;

＆＃13;

function Add() {
//function here

}

＆＃13;

<table border="1" align="center">
   <tr>Add multiple items at once:</tr>
   <tr>
      <td>
         <select id="li1" size="5" multiple>
            <option value="Item1">I1</option>
            <option value="Item2">I2</option>
            <option value="Item3">I3</option>
            <option value="Item4">I4</option>
            <option value="Item5">I5</option>
         </select>
      </td>
      <td>
         <select id="li2" size="5" multiple>
         <!-- add items in here -->
         </select>
      </td>
   </tr>
   <tr>
      <td colspan="2" align="center">
         <button type="button" onclick="Add()">Add</button>
      </td>
   </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你尝试了什么？ ： - ）

var src = document.getElementById("src");
var dst = document.getElementById("dst");

// you can replace the "change" event with any event,
// the related action remains the same (i.e. copy the
// selected options to the second list)

src.addEventListener("change", function () {
  // empty the second list
  while (dst.firstChild) {
    dst.removeChild(dst.firstChild);
  }
  // copy selected options to the second list
  for (var i = 0; i < src.options.length; i++) {
    if (src.options[i].selected) {
      dst.appendChild(src.options[i].cloneNode(true));
    }
  }
});

<select id="src" multiple>
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
  <option>five</option>
</select>
<select id="dst" multiple></select>

如果您担心浏览器兼容性，这里使用JQuery是等效的：

var src = $("#src");
var dst = $("#dst");

src.change(function () {
  dst.empty().append(
    src.find(":selected").clone()
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="src" multiple>
  <option>one</option>
  <option>two</option>
  <option>three</option>
  <option>four</option>
  <option>five</option>
</select>
<select id="dst" multiple></select>

Answer 2

try this code for add and remove from one select box to another

$().ready(function() {  
 $('#add_btn').click(function() {  
  return !$('#li1 option:selected').remove().appendTo('#li2');  
 });  
 $('#remove_btn').click(function() {  
  return !$('#li2 option:selected').remove().appendTo('#li1');  
 });  
});

Answer 3

如果你使用jquery：

function add(){
  //move from 1 to 2  
  //$('#li2').append($('#li1').find('option:selected'));
  
  //copy from 1 to 2
  $('#li2').append($('#li1').find('option:selected').clone());

}

$('#btnAdd').on('click', add);

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<table border="1" align="center">
   <tr>Add multiple items at once:</tr>
   <tr>
      <td>
         <select id="li1" size="5" multiple>
            <option value="Item1">I1</option>
            <option value="Item2">I2</option>
            <option value="Item3">I3</option>
            <option value="Item4">I4</option>
            <option value="Item5">I5</option>
         </select>
      </td>
      <td>
         <select id="li2" size="5" multiple>
         <!-- add items in here -->
         </select>
      </td>
   </tr>
   <tr>
      <td colspan="2" align="center">
         <button type="button" id='btnAdd'>Add</button>
      </td>
   </tr>
</table>