[ACCEPTED]-jQuery moving MultiSelect values to another MultiSelect-select

Accepted answer

Score: 72

$().ready(function() {  
 $('#add').click(function() {  
  return !$('#select1 option:selected').remove().appendTo('#select2');  
 });  
 $('#remove').click(function() {  
  return !$('#select2 option:selected').remove().appendTo('#select1');  
 });  
});

Score: 10

Try the following (taken from http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html)

<html>  
<head>  
 <script src="js/jquery.js" type="text/javascript"></script>  
 <script type="text/javascript">  
  $().ready(function() {  
   $('#add').click(function() {  
    return !$('#select1 option:selected').remove().appendTo('#select2');  
   });  
   $('#remove').click(function() {  
    return !$('#select2 option:selected').remove().appendTo('#select1');  
   });  
  });  
 </script>  

 <style type="text/css">  
  a {  
   display: block;  
   border: 1px solid #aaa;  
   text-decoration: none;  
   background-color: #fafafa;  
   color: #123456;  
   margin: 2px;  
   clear:both;  
  }  
  div {  
   float:left;  
   text-align: center;  
   margin: 10px;  
  }  
  select {  
   width: 100px;  
   height: 80px;  
  }  
 </style>  

</head>  

<body>  
 <div>  
  <select multiple id="select1">  
   <option value="1">Option 1</option>  
   <option value="2">Option 2</option>  
   <option value="3">Option 3</option>  
   <option value="4">Option 4</option>  
  </select>  
  <a href="#" id="add">add &gt;&gt;</a>  
 </div>  
 <div>  
  <select multiple id="select2"></select>  
  <a href="#" id="remove">&lt;&lt; remove</a>  
 </div>  
</body>  
</html>

Score: 9

I had same problem but i found out a way 3 around it

<div>
    <select multiple id="select1">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </select>
</div>
<div>
    <select multiple id="select2"></select>
</div>

jquery

$('#select1').click(function () {
     return !$('#select1 option:selected').remove().appendTo('#select2');
});

$('#select2').click(function () {
     return !$('#select2 option:selected').remove().appendTo('#select1');
 });

if want a button add a add 2 >> and jquery click selector here 1

example http://jsfiddle.net/diffintact/GJJQw/3/

Score: 5

There's a jquery plugin called crossSelect which seems 6 to do what you want.

jQuery doesn't have 5 this built in, you would need to either 4 find a plugin you like and use that, or 3 write your own. (And of course you don't 2 have to use jQuery to write or use it, you could 1 implement it in pure javascript if you like)

Score: 4

$('#boxa option').appendTo('#boxb');

Score: 2

If you are fine with plugin, this plugin 1 does work well.

http://crlcu.github.io/multiselect/#home

Score: 0

Here goes my html code

<div>
        <select multiple id="select1">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
            <option value="6">Option 6</option>
        </select>
        <a href="#" id="add">add &gt; &gt;</a>
    </div>
    <div>
        <select multiple id="select2"></select>
        <a href="#" id="remove">remove &lt; &lt;</a>
    </div>

and Javascript code

$("#add").click(function(){
    $("#select1 option:selected").remove().appendTo($("#select2"));
})
$("#remove").click(function(){
    $("#select2 option:selected").remove().appendTo($("#select1"));
})

Make 1 sure you imported jquery.js file.

Score: 0

If using Bootstrap, I found bootstrap-duallistbox quite handy.

Filterable
Responsive
Localizable
Highly customizable
Seems well maintained

Score: 0

If you want a one time selection and form 2 submission quick solution to add and remove 1 options between two selects on click.

$(document).on('click', '.onclickaddto', function(e){
    var to  = $(this).attr('data-to');
    $(this).find('option:selected').remove().appendTo($(to)); 
});

.multiselect{
    width: 98%;
    height: 100px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="display:flex;">
   <div style="width:50%;">
        <h2>Enabled countries</h2>
          <select name="allowed_countries[]" class="onclickaddto multiselect" data-to="#available_countries" id="allowed_countries" multiple=""></select>
    </div>
    
    <div style="width:50%">
        <h2>Available countries</h2>
            <select class="onclickaddto multiselect" id="available_countries" data-to="#allowed_countries" multiple="">
                <option value="AF">Afghanistan</option>
                <option value="AL">Albania</option>
                <option value="DZ">Algeria</option>
                <option value="AD">Andorra</option>
        </select>
     </div>
     
</div>

Source: stackoverflow.com

Jquery Select meta[property=og:image]?

How To Insert OPTIONs into SELECT with jQuery -- Cross-Platform, Even IE6

Unselect what was selected in an input with .select()

Trigger Change event and keyup event in select element

how to get option title="sample" using jquery

How to set the default value of a select box using JQuery in IE9?

Get SELECT's value and text in jQuery

Jquery-nice-select plugin not working properly

Selecting an option based on the value of its data attribute

Informix: Select null problem

Cookie Warning

We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.