— jQuery Plugin – Multiple Select Transfer

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!

sourcedemo

Setup

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>

HTML

<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;amp;raquo;</a>
<select multiple="multiple" id="select2">
</select>
<a href="#" id="removeT" class="button">remove &amp;amp;amp;amp;amp;laquo;</a>

Css

/*Plugin classes*/
.hidden{display:none;}
.added{color:#CCCCCC;}
/*End*/

Initialize jTransfer

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


sourcedemo


  • matias
    Hi denise92,

    I finally didnt use jquery-plugin-multiple-select-transfer, and i not remember why i did that way :)

    But i think If you load the "Option value" from a DB you only have to write "selected" in the "Option value" witch you want to be preselected.

    1.<select id="select1" multiple="">02. <option selected="" value="1">Sunny</option>03. <option value="2">Pranav</option>04. <option value="3">Orkut</option>05. <option value="4">Facebook</option>06.</select>

    Hope its helps

    Matias
  • denise92
    really thanks a lot!!! it's work!!! ^0^
  • denise92
    Dear matias:
    I've add the new code in jquery.transfer.js.
    can you teach me how to show the "selected items" in html page?
    I guess it should be set something in $('#select1').transfer({.....});

    thanks a lot!!
  • matias
    (Preload values onload)

    Ok, i had make it work, im sure that is not the best way

    The values yo want to transfer had to have "selected" atributte


    Add this line in jquery.transfer.js

    $(o.addId).click(function()
    {
    cTransfer();
    });
    ##### NEW CODE ####
    $(o.addId).ready(function()
    {
    cTransfer();
    });
    ##### END OF NEW CODE

    }
    if(o.removeId!='')
    {
    $(o.removeId).click(function()
    {
    cRemove();
    });
    }
  • matias
    Hi,

    ¿How can a preload some selected values?

    I want to charge in the second box some preselected values on load.

    THANKS !

    Matias
  • matias
    Hi, to recibe selected values (select2) in PHP do:

    // Jquery
    $('#save').click(function() {
    $('#select2 option').each(function(i) {
    $(this).attr("selected", "selected");
    });
    });

    AND THE MOST IMPORANT -> SELECT2 name must be name="select2[]" and then you can recibe de selected values in a array

    Hasta luego !
  • kabeza
    Hi SunnyLuthra
    I've downloaded your plugin, and was having trouble when submitting the form, I didn't see any values submitted...
    The code from Leigh (http://mypaaji.com/index.php/2...) worked fine...
    Are you planning fixes or updates to this awesome plugin?

    Also: sometimes, when i press the "Add all" button, all the items are cloned, duplicated in the first select... the other buttons work fine...
  • This is cool, thanks for developing it!

    My feedback: I'm using this for admins to be able to add 'privileged' users to an access list. When they edit this list, I want the second select box to be preloaded with the values in my database. This works fine, but when I remove these values from the second select box, they aren't in the first one - my query puts all of the privileged users in the second box and all the normal users in the first one. Does this make sense? What I'm looking for would be a way for this to work so when you remove a user, if they don't already exist in the first box, it adds them. But this is a minor thing - great work!
  • VivaLasVegas
    For ie7?
  • sunnyluthra
    I haven't checked it on IE but i guess it should work fine on IE > 6.
  • bstevens90
    Something that you may or may not care about and I haven't looked through the code so I don't know if theres a quick fix for the scripting on the double click. But it doesn't work in IE 7.

    IE strikes again!

    But its a very cool implementation. Much how I would have "attempted" to make one if I was going to. Hopefully I can make some use out of this one.

    Thanks!
  • sunnyluthra
    :) actually this is my first plugin and I think it is supposed to be like this only heheh full of bugs :D , anyways I have updated the demo and download as well it should work in IE>6 too, actually I forgot to remove a line of code which I added for testing purpose which was creating problem in IE..
  • bighippo
    Hi! thanks for this cool plugin!

    I tested the "searchText" in IE 7 it wont work :( is there a fix or a work around for this problem. Thanks a lot

  • sunnyluthra
    Frankly speaking I haven't tested it on any of IE browser, but I think i should have :|. anyways thanks, i will surely look into it..
  • bstevens90
    Don't blame you at all. I have to work with it at work all the time as it is the primary browser used there because thats what fits their consumer base so I tend to double check anything I want to use for IE compatibility. Hopefully IE will catch up with the other browsers with IE 8 but I havn't used it yet to see.
  • praveen
    trouble with ie6 search is not working in ie6
  • sunnyluthra
    We can't hide a select option object in IE, apparently because of a bug in IE. The option does not disappear.
  • julien_tahiti
    That would be cool !

    Other problem : I didn't manage to bring 2 of these on the same page with different ids... is it possible and easy to do ?

    rysss had success but I don't understand his las post...

    Thank you.
  • sunnyluthra
    Julien download the latest zip, now you can add two of them on the same page...
  • julien_tahiti
    Thank you very much.

    I found a problem with this version : selected options still grey in the destination select and (so) can't be removed by double click.
  • julien_tahiti
    Perfect ! Thanks for all !
  • sunnyluthra
    If you want to change the color of destination select option you can do this by CSS. ex
    #DestinationSelectID .added{color:#000}
  • sunnyluthra
    Sorry for that actually i forgot to remove a line which i added for testing purpose. I have updated the demo as well as download too.. Please download it again and its my first plugin so I think it is supposed to be like this only :D... he he
    Thanks for ironing that bug out..
  • sunnyluthra
    hy, actually you cant have two of them on same page :(. but apparently it will be possible in next version..
  • julien_tahiti
    Great transfer script. On top of that with a filter !

    One thing is it's hard to integrate with jquery validate plugin (because there is no event on the select when adding items) and you must add a script to select all options before submitting your form if you want to catch the values.

    So is there anyway to simulate an onchange or something like that and to select all options after manipulating the list.
  • Hi

    I was having the same problem however, I have added the following snippet to the submit function, this also works with jquery validate:

    $("#submitbutton").click(function() {
    $("#select2 option").each(function(i) {
    $(this).attr("selected", "selected");
    });
    $("#form").submit();
    return false;
    });

    Hope this helps!
  • sunnyluthra
    I will definitely try to add some events on it as soon as I get time :) ...
  • I got problem while using this:

    $().ready(function(){
    $('#admin-group').transfer({
    dblClick:true,//true or false, activates double click transfer
    addId:'#add-new-single',//add buttong id
    addAllId:'#add-new-all', // add all button id
    removeId:'#remove-new-single', // remove button id
    removeAllId:'#remove-new-all',// remove all button id
    to:'#admin-group-allowed',
    Class:'added'//class to be added when option tranfered to another select.t
    });

    $('#admin-group-modif').transfer({
    dblClick:true,//true or false, activates double click transfer
    addId:'#add-new-single-modif',//add buttong id
    addAllId:'#add-new-all-modif', // add all button id
    removeId:'#remove-new-single-modif', // remove button id
    removeAllId:'#remove-new-all-modif',// remove all button id
    to:'#admin-group-allowed-modif',
    Class:'added'//class to be added when option tranfered to another select.t
    });
    });


    //end code

    The routine work fine with "div.admin-group-modif" but I got error at "div.admin-group". Buttons in first DIV not work but work fine in second DIV.

    any suggestion?
  • sunnyluthra
    it should work fine but please change "Class" to "tClass", if possible please provide url for this.
  • ok, my problem just corrected by placing both of them in buttons Event click on parent DIV. Thanks for quick reply.
  • shinoj
    hi
    it's working fine.
    but i can't get value select2 in PHP scrip.
  • sunnyluthra
    just give name to select2 in html and then use $_POST['select2Name'] in your php
  • chris
    Hi sunnyluthra,

    is this what you mean?:
    <select id="selectRight" multiple="" name="cats"> (#selectRight being my version of your select2).echo $_POST['cats']; // no output.if i post this it will not send the values since the options do not have the "selected=selected" attribute. Even if i select them all by hand it will only send the value of the last option...any thoughts?</select>
blog comments powered by Disqus