jQuery multiselect just to copy from one select box to another one
Question
Here am using jquery multiselect. When I click on a item it is moving from one select box to another one, but I need just to copy from a select box to another one. I want clicked item always available to left select box. Any suggestions?
$(document).ready(function() { $('#undo_redo').multiselect(); });
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="https://www.jqueryscript.net/demo/Two-side-Multi-Select-Plugin-with-jQuery-multiselect-js/js/multiselect.js"></script> <div class="container"> <h1 style="margin:10px auto 50px auto; text-align:center">jQuery multiselect.js Example</h1> <div class="row"> <div class="col-xs-5"> <select name="from" id="undo_redo" class="form-control" size="13" multiple="multiple"> <option value="1">C++</option> <option value="2">C#</option> <option value="3">Haskell</option> <option value="4">Java</option> <option value="5">JavaScript</option> <option value="6">Lisp</option> <option value="7">Lua</option> <option value="8">MATLAB</option> <option value="9">NewLISP</option> <option value="10">PHP</option> <option value="11">Perl</option> <option value="12">SQL</option> <option value="13">Unix shell</option> </select> </div> <div class="col-xs-2"> <button type="button" id="undo_redo_undo" class="btn btn-primary btn-block">undo</button> <button type="button" id="undo_redo_rightAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-forward"></i></button> <button type="button" id="undo_redo_rightSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> <button type="button" id="undo_redo_leftSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> <button type="button" id="undo_redo_leftAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button> <button type="button" id="undo_redo_redo" class="btn btn-warning btn-block">redo</button> </div> <div class="col-xs-5"> <select name="to" id="undo_redo_to" class="form-control" size="13" multiple="multiple"></select> </div> </div> </div>
2 answers
solution1
0 2018-06-26 10:11:08
Try this
$('.add').click(function(){ $('.all').prop("checked",false); var items = $("#list1 input:checked:not('.all')"); var n = items.length; if (n > 0) { items.each(function(idx,item){ var choice = $(item); choice.prop("checked",false); choice.parent().appendTo("#list2"); }); } else { alert("Choose an item from list 1"); } }); $('.remove').click(function(){ $('.all').prop("checked",false); var items = $("#list2 input:checked:not('.all')"); items.each(function(idx,item){ var choice = $(item); choice.prop("checked",false); choice.parent().appendTo("#list1"); }); }); /* toggle all checkboxes in group */ $('.all').click(function(e){ e.stopPropagation(); var $this = $(this); if($this.is(":checked")) { $this.parents('.list-group').find("[type=checkbox]").prop("checked",true); } else { $this.parents('.list-group').find("[type=checkbox]").prop("checked",false); $this.prop("checked",false); } }); $('[type=checkbox]').click(function(e){ e.stopPropagation(); }); /* toggle checkbox when list group item is clicked */ $('.list-group a').click(function(e){ e.stopPropagation(); var $this = $(this).find("[type=checkbox]"); if($this.is(":checked")) { $this.prop("checked",false); } else { $this.prop("checked",true); } if ($this.hasClass("all")) { $this.trigger('click'); } });
.v-center { min-height:200px; display: flex; justify-content:center; flex-flow: column wrap; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="container bootstrap snippet"> <div class="row"> <div class="col-md-12 text-center text-primary"> <h3><span class="glyphicon glyphicon-th-large"></span>Interact with the elements of lists<span class="glyphicon glyphicon-th-large"></span></h3> </div> <div class="col-sm-4 col-sm-offset-1"> <div class="list-group" id="list1"> <a href="#" class="list-group-item active"><span class="glyphicon glyphicon-th-large"></span>List 1 <input title="toggle all" type="checkbox" class="all pull-right"></a> <a href="#" class="list-group-item">Second item <input type="checkbox" class="pull-right"></a> <a href="#" class="list-group-item">Third item <input type="checkbox" class="pull-right"></a> <a href="#" class="list-group-item">More item <input type="checkbox" class="pull-right"></a> <a href="#" class="list-group-item">Another <input type="checkbox" class="pull-right"></a> </div> </div> <div class="col-md-2 v-center"> <button title="Send to list 2" class="btn btn-default center-block add"><i class="glyphicon glyphicon-chevron-right"></i></button> <button title="Send to list 1" class="btn btn-default center-block remove"><i class="glyphicon glyphicon-chevron-left"></i></button> </div> <div class="col-sm-4"> <div class="list-group" id="list2"> <a href="#" class="list-group-item active"><span class="glyphicon glyphicon-th-large"></span>List 2 <input title="toggle all" type="checkbox" class="all pull-right"></a> <a href="#" class="list-group-item">Alpha <input type="checkbox" class="pull-right"></a> <a href="#" class="list-group-item">Charlie <input type="checkbox" class="pull-right"></a> <a href="#" class="list-group-item">Bravo <input type="checkbox" class="pull-right"></a> </div> </div> </div> </div> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
solution2
0 2018-08-22 08:21:49
I assume there is no built-in support for remaining clicked item, so I render the select element again by hand, something like that:
$('#multiselect').multiselect(); var arr = []; $('#multiselect option').each(function() { // console.log($(this).text() + ' ' + $(this).val()); arr.push($(this).text()); }); $('button').click(function() { $("#multiselect").empty(); for (var i = 0; i < arr.length; i++) { var node = document.createElement("option"); var textnode = document.createTextNode(arr[i]); node.appendChild(textnode); document.getElementById("multiselect").appendChild(node); } });
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="https://www.jqueryscript.net/demo/Two-side-Multi-Select-Plugin-with-jQuery-multiselect-js/js/multiselect.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="col-xs-5"> <select name="from[]" id="multiselect" class="form-control" size="8" multiple="multiple"> <option value="1">C++</option> <option value="2">C#</option> <option value="3">Haskell</option> <option value="4">Java</option> <option value="5">JavaScript</option> <option value="6">Lisp</option> <option value="7">Lua</option> <option value="8">MATLAB</option> <option value="9">NewLISP</option> <option value="10">PHP</option> <option value="11">Perl</option> <option value="12">SQL</option> <option value="13">Unix shell</option> </select> </div> <div class="col-xs-2"> <button type="button" id="multiselect_rightAll" class="btn btn-block"> <i class="glyphicon glyphicon-forward"></i> </button> <button type="button" id="multiselect_rightSelected" class="btn btn-block"> <i class="glyphicon glyphicon-chevron-right"></i> </button> <button type="button" id="multiselect_leftSelected" class="btn btn-block"> <i class="glyphicon glyphicon-chevron-left"></i> </button> <button type="button" id="multiselect_leftAll" class="btn btn-block"> <i class="glyphicon glyphicon-backward"></i> </button> </div> <div class="col-xs-5"> <select name="to[]" id="multiselect_to" class="form-control" size="8" multiple="multiple"></select> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Multiselect Box with Optgroups: Select one per group
using jQuery show and hide options of one select box from the value selected of another select box
How to copy selection from one select to another?
Jquery Move from One Box to another
select one value change another select box value with jquery
Copy an attribute from one element to another with jQuery
In JQuery, how do I copy a subset of select options from one select menu to another?
Using jQuery to replace an option element in one select box with another?
Copy only the entered character from one text box to another
Two forms, one select/dropdown box - need to copy select value from one form to other
Related Tags