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.

<table>
	<tr>
		<td>
			<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>
		  </select>
		 </td>
		 <td> 
			<a href="#" id="add">&gt;&gt;</a> <br/><br/>
			<a href="#" id="remove">&lt;&lt;</a>
		</td>
		<td>	 
			<label>Selected Value</label><br/> 
		<select name="multi_list2[]" id="select2" multiple="multiple">
		</select>  
		</td>
	</tr>
</table>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></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>

Related Posts



1 Response to How to submit form without refreshing page with jquery and ajax

Avatar

Lenny Forgie

July 9th, 2015 at 6:32 pm

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!

Leave a Reply

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


*