如何在使用javascript函數單擊按鈕時將選擇列表框中的多個值添加到另一個列表框中？

Question

我想從第一個列表中選擇多個值，然后單擊按鈕將這些值添加到第二個列表中。 我該如何編寫此類功能？

 function Add() { //function here } 

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

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 (ie 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>