Move list box items from one box to another with jquery
While working with select boxes somewhere you need to use multiple selections and selecting multiple items from a bigger list is not user friendly. Here the idea is to make two select boxes and move items from one box to another. So it becomes more user friendly and looks good when it comes to UX.
It is quite easy to implement this with jquery. Just remove the item from one box and append to another.
You can move all items at once or you can move only selected items.
The above two lines of jquery does all the trick. Here is the full script. The jquery, css and the html.
See the demo of the code.
It is quite easy to implement this with jquery. Just remove the item from one box and append to another.
You can move all items at once or you can move only selected items.
jQuery to move selected list box items from one box to another
$('#from option:selected').remove().appendTo('#to');
jQuery to move all list box items from one box to another
$('#from option').remove().appendTo('#to');
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Move from one select box to another</title>
<style type="text/css">
select {
width: 200px;
float: left;
}
.controls {
width: 40px;
float: left;
margin: 10px;
}
.controls a {
background-color: #222222;
border-radius: 4px;
border: 2px solid #000;
color: #ffffff;
padding: 2px;
font-size: 14px;
text-decoration: none;
display: inline-block;
text-align: center;
margin: 5px;
width: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script>
function moveAll(from, to) {
$('#'+from+' option').remove().appendTo('#'+to);
}
function moveSelected(from, to) {
$('#'+from+' option:selected').remove().appendTo('#'+to);
}
function selectAll() {
$("select option").attr("selected","selected");
}
</script>
</head>
<body>
<form name="selection" method="post" onSubmit="return selectAll()">
<select multiple size="10" id="from">
<option value="html">Html</option>
<option value="css">Css</option>
<option value="google">Google</option>
<option value="javascript">Javascript</option>
<option value="jquery">Jquery</option>
<option value="regex">Regex</option>
<option value="php">Php</option>
<option value="mysql">Mysql</option>
<option value="xml">Xml</option>
<option value="json">Json</option>
</select>
<div class="controls">
<a href="javascript:moveAll('from', 'to')">>></a>
<a href="javascript:moveSelected('from', 'to')">></a>
<a href="javascript:moveSelected('to', 'from')"><</a>
<a href="javascript:moveAll('to', 'from')" href="#"><<</a> </div>
<select multiple id="to" size="10" name="topics[]"></select>
<form>
</body>
</html>
Move list box items from one box to another with jquery
Reviewed by JS Pixels
on
December 06, 2013
Rating:
Reviewed by JS Pixels
on
December 06, 2013
Rating:
Nice article , thank you
ReplyDeletenice article.. how to get all the selected values in the to select box using php
ReplyDeleteHello Ram Kumar,
DeleteYou need to select all options when the form is submitted
Use this function
function selectAll() {
$("select option").attr("selected","selected");
}
Call this function when your form is submitted like
<form onSubmit="return selectAll()" method="post>
....
....
....
</form>
Thats it.
You will get all values in an array named topics according to above code. By the way I have updated the article with the form and this new function
thanks it works...
ReplyDeleteThanks, Nice to know it helped !!
Deleteif we don't want to submit the from then , when selectAll() this function being called.
ReplyDeleteselectAll() this function can be call where except on submit from ,it can be call on any button click.
ReplyDeleteI want to drag and drop the option from one box to another box.
ReplyDeleteCan you help me in that. Thanks in advance.
Altaf how to move if object as datatables/grid
ReplyDeleteHi,
ReplyDeleteHow to move items back to its original place.i.e i need to to keep listbox in same order once i move from destination listbox to source listbox.