CODEWITHSUNDEEP
jqueryselect
Phill Pafford
Phill Pafford

Reputation: 85348

jQuery moving MultiSelect values to another MultiSelect

So I have a MultiSelect box with x values which I need the ability to move to another MultiSelect box and vise versa.

<select class="boxa" multiple="multiple">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<select class="boxb" multiple="multiple">

</select>

Need to move all or one of the values of boxa to boxb on a button click, also with the ability to move the values back from boxb to boxa.

Does jQuery have anything like this or is this a custom snippet of code?

Upvotes: 21

Views: 34774

Answers (9)

codedudey
codedudey

Reputation: 389

If you want a one time selection and form submission quick solution to add and remove 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>

Upvotes: 1

Pierre de LESPINAY
Pierre de LESPINAY

Reputation: 46198

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

  • Filterable
  • Responsive
  • Localizable
  • Highly customizable
  • Seems well maintained

Upvotes: 0

Laxman More
Laxman More

Reputation: 307

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

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

Upvotes: 2

Santosh
Santosh

Reputation: 2323

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 sure you imported jquery.js file.

Upvotes: 0

jai
jai

Reputation: 549

I had same problem but i found out a way 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 >> and jquery click selector here

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

Upvotes: 9

Silas Palmer
Silas Palmer

Reputation: 2985

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>

Upvotes: 10

Vijayakrishna
Vijayakrishna

Reputation: 41

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

Upvotes: 4

Yasitha
Yasitha

Reputation: 2303

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

Upvotes: 75

Tom Ritter
Tom Ritter

Reputation: 101390

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

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

Upvotes: 5

Related Questions