Multi Select Drag and Drop Jquery

February 26, 2012 | In: JQuery

When data is very large and selection using multiselect is difficult so you can use this option multi select drag and drop with jquery. The first holds the options that are available, and the second holds the options that have been selected. Usually, the two boxes are separated by add and remove buttons. You can select an item from the first box, click the add button, and add it to the second box. Likewise, you can select an item from the second box, click the remove button, and it goes back into the unselected box.

			<label>All Value</label><br/> 
		  <select name="multi_list1" id="select1" multiple="multiple">
			<option value="name1">Name 1</option>  
		    <option value="name2">Name 2</option>  
		    <option value="name3">Name 3</option>  
		    <option value="name4">Name 4</option>
			<a href="#" id="add">&gt;&gt;</a> <br/><br/>
			<a href="#" id="remove">&lt;&lt;</a>
			<label>Selected Value</label><br/> 
		<select name="multi_list2[]" id="select2" multiple="multiple">
<script language="javascript" src=""></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');  

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Inquire Now



PSD to Magento Advertisement Advertisement Advertisement

Latest comments

  • None found