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>

Comments

comments

Powered by Facebook Comments

Related Posts



2 Responses to How to submit form without refreshing page with jquery and ajax

Avatar

hostgator coupons

February 11th, 2013 at 7:56 pm

Thanks for finally talking about > Change image on mouse
hover effect with jquery | JQuery Development | Web Development India < Loved it!

Avatar

mobilanpassning

May 18th, 2013 at 7:40 am

This is really attention-grabbing, You are an overly skilled blogger.
I’ve joined your feed and sit up for seeking extra of your excellent post. Additionally, I’ve shared your
website in my social networks

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=""> <strike> <strong>