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

How do I add multiple values from a select listbox to another listbox on click of a button using javascript function?

本文关键字：列表 另一个 按钮 单击 javascript 函数 一个 添加 何添加 选择      更新时间：2023-09-26

我想从第一个列表中选择多个值，并在单击按钮时将这些值添加到第二个列表。我怎么写这个函数呢?

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>

你试了什么?: -) 

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>

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

如果你使用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>

相关文章：