This plugin adds a functionality of transferring options from one select to another. I did it because
my friend Pranny needed something like this
.
If you have any comment or ways to improve it, just leave me a comment!
Nothing is easier to use. First include jQuery library, jTransfer js in the head of page(s) where you
want to use jTransfer.
you can download jquery from jQuery.com .
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.transfer.js"></script>
<select multiple="multiple" id="select1"> <option value="1">Sunny</option> <option value="2">Pranav</option> <option value="3">Orkut</option> <option value="4">Facebook</option> </select> <a href="#" id="addT" class="button">add &amp;amp;amp;amp;raquo;</a> <select multiple="multiple" id="select2"> </select> <a href="#" id="removeT" class="button">remove &amp;amp;amp;amp;laquo;</a>
/*Plugin classes*/
.hidden{display:none;}
.added{color:#CCCCCC;}
/*End*/
<script type="text/javascript">
$(document).ready(function() {
$('#select1').transfer({
to:'#select2',//selector of second multiple select box
addId:'#addT',//add buttong id
removeId:'#removeT' // remove button id
});
});
</script>
To customize the settings, you need to pass the values to jTransfer, like so:
<script type="text/javascript">
$(document).ready(function() {
$('#select1').transfer({
to:'#select2',//selector of second multiple select box
searchId:'#search',//id of search text, provide only if you want to enable searching
dblClick:true,//true or false, activates double click transfer
searchText:'{count} options matching {keyword}',
searchTextId:'#searchText',//id to show search message, ex- matching 2 records
addId:'#addT',//add buttong id
removeId:'#removeT', // remove button id
addAllId:'#addAllT', // add all button id
removeAllId:'#removeAllT',// remove all button id
tClass:'added'//class to be added when option tranfered to another select.
});
});
</script>
Share Some Love