CODEWITHSUNDEEP
javascripthtml
Vidit
Vidit

Reputation: 55

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

I want to select multiple values from first list and on clicking button those values are added to second list. How do I write such function?

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>

Upvotes: 0

Views: 1081

Answers (3)

user1636522
user1636522

Reputation:

What did you try ? :-)

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>

If you worry about browsers compatibility, here is an equivalent using 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>

Upvotes: 1

ya_dimon
ya_dimon

Reputation: 3822

if you use 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>

Upvotes: 0

Rax Shah
Rax Shah

Reputation: 531

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

Upvotes: 0

Related Questions