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.

<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>

Comments

comments