Multi Select Drag and Drop Jquery

Home / JQuery / Multi Select Drag and Drop 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


  • It’s the best time to make some plans for the longer term and it is time to be happy. I’ve read this put up and if I may just I desire to recommend you some attention-grabbing things or tips. Maybe you could write next articles relating to this article. I wish to read even more issues approximately it!

  • Johna206

    I am just seeming both for blog sites which give independent, nutritious commentary on all difficulties or blogging sites which have a liberal or droppedwing slant. Thank you..

Leave a Reply

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