JqueryJquery plugins   PortFolioSenamion's PortFolio HomeHome page corner A jquery blog




jQuery select multiple double side

20 febbraio 2010 by Giovanni

Multiselect (html select with parameter multiple=”multiple”) normally are very difficult to use.
In this modified version of multiselect the select is double (double side select), the right one with the selected element, the left side for insert other element.

mulstiselect2side screenshot

Four new button for:

  • add the left selected options to the right
  • add all left options to the right
  • remove the right selected options
  • remove all right options

Double click both on left and right options is enabled.

Five optional move button:

  • sort – sort options
  • top – move to top selected options
  • up – move up selected options
  • down – move down selected options
  • bottom – move to bottom selected options

See the plugin Select Multiple Double Side page!

In Jquery | 139 Comments »

139 Comments a “jQuery select multiple double side”

  1. Gav scrive:

    Really cool plugin!!
    I was using an existing jQuery plugin however this was really slow but yours works like a dream! It is so much quicker than the previous solution I had found (jQueryUI MultiSelect).

    Keep up the good work..

  2. Martin scrive:

    Great plugin… wish it had support for optgroup to make subsets within a box.

    - M

  3. Basil scrive:

    Great stuff. However, it would be more naturally to swap left and right list boxes, or at least allow its customization.

  4. Giovanni scrive:

    New parameters selectedPosition (default ‘right’), if you launch:

    $().ready(function() {
    	$('select').multiselect2side({selectedPosition: 'left'});

    Left and right list boxes are swapped.

  5. QuanNH scrive:

    how to get selected value at server ?

  6. Giovanni scrive:

    The values are stored in the original select

  7. Stig scrive:

    Excellent work!!

    Any chance for adding “move up/down” feature?

    Multiple select order are often essential in addition to the values selected.

    Donation on it’s way if implemented :-)

  8. Giovanni scrive:

    Thanks for donation :)

    Version 0.2 with new parameters for “move up/down” feature!

    • selectedPosition – position of selected elements – default ‘right’
    • moveOptions – show move options – default true
    • labelTop – label of top buttom – default ‘Top’
    • labelBottom – label of bottom buttom – default ‘Bottom’
    • labelUp – label of up buttom – default ‘Up’
    • labelDown – label of down buttom – default ‘Down’
  9. Giovanni scrive:

    New Demo!

  10. Giovanni scrive:

    New CSS!

  11. guoyy scrive:

    Hi,It is very quick.
    How can I add a new option to a select? The code below does not work.why?Thanks in advance

    var option = document.createElement("option");
    option.text = "china";
    option.value = "1";
  12. guoyy scrive:

    ok,I have got the answer.

    var option = document.createElement(”option”);
    option.text = “china”;
    option.value = “1″;

    Thank you all the same.
    This is really cool and quick.

  13. Giovanni scrive:

    You can add the element in the __sx (left) or __dx (right) select but also in the original one.

  14. mask scrive:

    why do i keep getting: selectedDx.last is not a function from firebug?

  15. Giovanni scrive:

    If you don’t have options selected on right select selectedDx is empty.

  16. Mike scrive:

    Very cool stuff!

  17. Zeki scrive:

    Is it possible to add maxsimum number of items can be transfer to the right side.

  18. Giovanni scrive:

    Ok Zeki! New version with new parameter maxSelected, for you!

  19. Shahid scrive:

    How can we use it with dependent drop down? eg. on change of state drop down it will show the related district.. in php

  20. Giovanni scrive:

    You can use jDoubleSelect

  21. Brian scrive:

    How would implement remove all or clear all from #first?

  22. Giovanni scrive:

    Remove all is the « button.

    You can trigger it (if you have only one multiselect) with:

  23. Ikhsan scrive:

    currently I need to vertically centered the moveOptions element, and this is what I did:

        $(this).css('padding-top', (($(this).prev().children('select').height()/2) - ($(this).height()/2)) + 'px' );

    btw, great stuff!!

  24. Giovanni scrive:

    Thanks Ikhsan in the new version move and updown options are vertically centered!

  25. Ikhsan scrive:

    Hi Giovanni, I notice that when I group the options with optgroup and then I click the add/remove all option, the real select element (the hidden one, that using optgroup) isn’t updated as I expected, so I change line #170 to:


    and on line #181 to:


    This both works for both (grouped options and ungrouped options).

  26. Nonnenmacher scrive:

    Would be great if you could wrapup an higher level code that would illustrate
    how to use it providing a build original select (the ones from your samples) and an helper function inside your multiselect2side jQuery plug-in to grab the result values in a javascript Array.

    I don’t see any update to the original select, and you get all values in your ms2side__dx one. So writing the helpers to get some array like [value1,value2]
    or [{key:,value:,selected:},...]
    would be of great help and make your plug much more isolated form the outside.

    Great work !

  27. Giovanni scrive:

    @Ikhsan: Thanks! I modify the code for optgroup!

    @Nonnenmacher: if you remove the hide() function on the original select you see that is updated! You may not use other than the originale select values! I tested it on ie, firefox and chrome browsers!

  28. Nonnenmacher scrive:

    @Ikhsan: I didn’t check it, I’ll test, I was just using the Safari inspector and was reading the DOM re-read from Safari. (didn’t test it in firefox).

    But anyway verified and author crafted samples on how to use it, with several more detailed jQuery sample code showing how to grab the various left,right elements in the _sx, _dx structures would be usefull for future users.

  29. Giovanni scrive:

    New version 0.6, correct bug with optgroup, thanks to Ikhsan!

  30. guoyy scrive:

    why not replace the change with a click?
    as the example shows below:


  31. B_S scrive:

    This is what I’m looking for!

    Btw, can I combine this plug-in with collapsible checkbox treeview like this http://www.redcarrot.co.uk/2009/11/11/collapsible-checkbox-tree-jquery-plugin/?

    I want to put the collapsible checkbox treeview in the left side.

    Can this be done?

  32. Giovanni scrive:

    @guoyy: with change() events are triggered only when options are changed, for me is better!

    #B_S: “Collapsible Checkbox Tree jQuery Plugin” use ul, is not easy to adapt to my plugin that use select and options.

  33. Sam scrive:

    This looks good. Would it be possible to add a filter as well – where the user would start typing and the available options would filter on the characters they entered? Also nice to have would be a sort option on the selected list.

  34. Laurent scrive:

    Thanks a lot for this great plug-in.

    How would implement the initialization of the selected items in JS (I cannot do it into HTML code.)?

    Let’s say i want to select items 2, 3 and 5 on startup ?

    Thanks lots,

  35. Giovanni scrive:

    If you want to add option before bind multiselect2side you can use (in a select with name mySelect):

    $('[name=mySelect]').append("{option value='99'}Value 99{/option}");

    If you want to add option after bind bind multiselect2side you can use:

    $('[name=mySelect]').append("{option value='99'}Value 99{/option}");
    $('#mySelectms2side__sx').append("{option value='99'}Value 99{/option}");

    If your selected element are on right. Or:

    $('[name=mySelect]').append("{option value='99'}Value 99{/option}");
    $('#mySelectms2side__dx').append("{option value='99'}Value 99{/option}");

    If your selected element are on left.

    Note: change { with less than sign and } with more than sign.

  36. Peter scrive:

    Great plug-in.

    The order of the selected items when I get them at the server does not always match the order I have selected using the up/down/top/bottom buttons. Is this a known bug, or have I implemented your plug-in incorrectly.


  37. Giovanni scrive:

    When you have the problem? I tested it on IE, firefox and chrome and like correct!

  38. Tomas Dermisek scrive:


    this is very nice plugin. Have you considered supporting the optgroups too as currently the optgroups just disappear from once the .multiselect2side() is applied. Or is there any config for this?



  39. Giovanni scrive:

    Problem supporting optgroups is with order, if on option move up exit from group? I have no idea how to implement both groups that order!

  40. Maurice scrive:


    I’ve implemented this plugin, but in IE8 it doesn’t seem to work. The selectboxes are empty and there is a js-error saying

    Message: Invalid argument.
    Rule: 113
    Character: 478
    Code: 0
    URI: http://code.jquery.com/jquery-1.4.1.min.js

    The demo at the jquery website doesn’t work with IE8 either..

    Does anyone have a solution?

  41. Giovanni scrive:

    Why don’t use jquery 1.4.2?

  42. Hans scrive:

    Script got someone a small issue too

    when i use a select name fields, it throws out

    fieldsms2side__dx => post

    aswell, kinda bad sometimes.

  43. Giovanni scrive:

    I did not understand!

  44. Hans scrive:

    use firebug, you see your script is sending a variable whats not should be sended.

  45. Hans scrive:

    make a select with name ‘fields’, only fields should be sended.

    however ‘fieldsms2side__dx’ is sended aswell with the last variable added.

  46. Hans scrive:

    found another big bug aswell.

    when you add a value from the left selects, its added on the right list as last option.

    but php array is telling its in array[0] instead of the last one.

  47. Giovanni scrive:

    Select with name *ms2side__dx is added by the plugin, I do not understand where is the problem.
    If you want to add a selected element you must add it in the correct position both in original select that in the [orginal-noame]ms2side__dx select.
    If you want to add an element non selected you must add it in the correct position both in original select that in the [orginal-noame]ms2side__sx select.

  48. Hans scrive:

    the problem is that i log user requests and i see each time this select.

    on submit you should remove this.

    but please check the urgent bug, that one is very important to fix for alot of users.

    print_r($array); is showing the good selection but wrong ids. last item added is submitted as $array[0], should be last array option.

  49. Giovanni scrive:

    Ok, now I understand!
    I added a new version (0.7) with order bug correct!

  50. Giovanni scrive:

    New realese 0.8 with sort button if moveOption enabled!

  51. Gérault thomas scrive:

    hello you have an error in your plugin with the library jquery-1.3.2

    if (selectedDx.last().val() != selectDx.last().val())
    if (selectedDx.filter(”:last”).val() != selectDx.filter(”:last”).val())

    line 216
    var prev = selectedDx.filter(”:first”).prev();
    var prev = selectedDx.filter(”:first”).prev();

    line 225
    var next = selectedDx.last().next();
    var next = selectedDx.filter(”:last”).next();

    line 234
    var first = selectDx.first();
    var first = selectDx.filter(”:first”);

    line 243
    var last = selectDx.last();
    var last = selectDx.filter(”:last”);

    comptatible with library 1.4.2

  52. Giovanni scrive:

    It’s ok, last() and first() are added on jquery 1.4!

  53. Brds scrive:

    I can’t get the jQuery select multiple double side working in IE. Not even the one on this page is working. The option lines are displaying in the source code, but they’re not showing up in the boxes for the user to mess around with. Any thoughts?

  54. Chris Miller scrive:

    This is very nice. I added a couple of properties to display text above each list.

    At line 25, I inserted:
    labelsx: ‘Available’,
    labeldx: ‘Selected’,

    At line 44, I inserted:
    var Header = ((o.labelsx != null) && (o.labeldx != null)) ? “” + o.labelsx + “” + o.labeldx + “” : “”;

    And at line 58, I added
    Header +
    after the line:
    ((o.selectedPosition != ‘right’ && o.moveOptions) ? divUpDown : “”) +

    Basically when labelsx and labelsdx are both not null, labels will be displayed above each select list.

  55. Steve scrive:

    This is fantastic, however I am having trouble getting the selected values to appear in the correct order. They are ordered correctly in the array I am passing as the selected values but they appear on the right side in the order they would appear on the left side. Is there a way I can set the order via jQuery?

  56. Giovanni scrive:

    Two new version, 0.9 add new labels button (left and right label) (thanks to Chris Miller) – 0.10 correct ie8 bug

  57. B-Prod scrive:

    For having the sort behavior working with jQuery 1.3.2, you should add this code after

    jQuery.fn.sort = function() {
    return this.pushStack([].sort.apply(this, arguments), []);

  58. Şahin scrive:

    Hi, thank you for the nice plugin. Works fine, i have added search function to your plugin. I couldnt find your mail adress if you mail me back. I can send you what i changed and added and added notes about to do.

    Thank you again and best regards.

  59. Giovanni scrive:

    @Şahin: my email address is info @ senamion.com

  60. Hermes scrive:

    Muchas Gracias ! thanks

  61. Tomasso scrive:

    Great plugin!!!

    One remark: We shouldn’t be able to move disabled options.

    Changed lines 111, 180, 181 and 182:

    111: var selectSx = leftSel.children(’:not(:disabled)’);

    180: leftSel.children(”:not(:disabled)”).appendTo(rightSel);
    181: leftSel.children(”:not(:disabled)”).remove();
    182: el.find(’option:not(:disabled)’).attr(”selected”, true);

  62. kofitw scrive:

    hello ,
    In the implementation it’s stated relative at your element. I don’t get what element. I used a div and yet it didn’t work.

    I want to add this to a modal dialog. I was having some challenges with the html and php till I came across this plugin.


  63. Giovanni scrive:

    With this plugin you must use a select multiple=”multiple”.
    The values are returned as select values.

  64. kofitw scrive:

    Thanks a lot for the response.
    I tried on a new php page and it worked.

    I want to implement it on a legacy system jquery v1.3.2. and it’s not responding.

    Any help

  65. Hermes scrive:

    hello! how i can add 1 option?

  66. Hermes scrive:

    hola! cómo puedo añadir una opción? after that the page a load

  67. Hermesf scrive:

    Hi! Many thanks for such an excellent plugin!

    Once bound
    $ (’# List’). Multiselect2side ((
    selectedPosition: ‘left’,
    moveOptions: false,
    labelsx: ‘* Selected *’
    labeldx ‘* Available *’

    You can add and remove options from the list?
    probe with what you mention in comment # 35.
    but does nothing.
    Since cutting out the list and linked?
    is to then create and add a list and link

  68. Giovanni scrive:

    I have updated comment #35 because wordpress delete html tags

  69. Hermesf scrive:

    hi! This plugin allows you to update an item?

  70. SK scrive:

    Thanks for this plugin! It works nicely in IE8 and 7 but there’s some kind of problem in IE6. Error says:

    Line 48
    Error: Could not set the selected property. Invalid property value.

    You can verify the error in IETester (http://www.my-debugbar.com/wiki/IETester/HomePage)

  71. SK scrive:

    There’s also one problem in Opera 10.54:
    When there are some items selected, moving one selected item upwards or downwards makes all the selected items being selected.

    This can be verified in Demo3.

  72. Martin scrive:

    Doesn’t work in IE6.
    Any fix??

  73. Giovanni scrive:

    New version 0.11 IE6 compatible.

  74. mike scrive:

    Is there a version of thsi control that works with jquery 1.3.2? we are using it in a CMS and the CMS is on 1.3.2 only.

  75. Andrey scrive:

    Hi, is it possible to get some event when i add or delete option from select list?


  76. Giovanni scrive:

    Original select is updated with the new others, then you can just add event to original select

  77. wut scrive:

    How can i update your component’s content when i populated original select using json?
    .trigger(”change”) doesn’t work.

  78. wut scrive:

    Wow) i figured out – how to do it :)

    $.post( url, array, function( data ){
    if( $(’.ms2side__div’) ){
    selectedPosition: ‘left’,
    moveOptions: false,
    labelsx: ‘Active’,
    labeldx: ‘Available’

  79. Margie Roginski scrive:


    I am trying to use your plugin but keep getting the error selectedDx.last is not a function. It looks like last() is in jquery 1.4, but not jquery 1.3.2 and I am still on 1.3.2. I can’t seem to find a download link for your older versions, could you tell me how to download the last version that supports jquery 1.3.2? Thank you – this seems like a very nice plug in.


  80. Margie Roginski scrive:

    I have solved this problem with selectedDx.last being not defined as a function. If you are using jquery 1.3.2, you can just put the following at the top of jquery.multiselect2side.js and it will define the necessary jquery 1.4 functions that are missing in 1.3.2:


    eq: function( i ) {
    return i === -1 ?
    this.slice( i ) :
    this.slice( i, +i + 1 );

    first: function() {
    return this.eq( 0 );

    last: function() {
    return this.eq( -1 );

  81. Giovanni scrive:

    Thank you very much, Margie!

  82. gpassero scrive:

    I’ve the same problem as Nonnenmacher was reporting… how do I get the results from the control? $(’#myList’ :selected) is only returning 1 value, not the 5 that were pushed to the right side. It seems like the original select is not being updated with the results of the user changes. Can you give a jquery example? Should I try to query the options that are left under #myListms2side__dx ?

  83. Giovanni scrive:

    Selected elements must be present in the original select. I tested also in Safari.
    You use version 0.11?

  84. John scrive:

    If I disable the underlying select element shouldn’t the buttons be disabled?

  85. nervino scrive:

    Great plugin!

    Is it possible to display a single multiselect with the sort buttons?

    Thank you!

  86. nervino scrive:

    Is it possible to have only one multiselect (single, not 2 multiselect side by side) with the sort buttons?

    thank you

  87. pablo scrive:

    I’d like to add an “option” in the list.

    For that I use

     function	update_select(newvalue)
    	document.getElementById('select-2').options[document.getElementById('select-2').length] = new Option(newvalue, newvalue);

    My new option comes well in the select but not displayed

    Someone has an idea or another method to add options?


  88. hood scrive:

    Great work you are sharing, thanks you so much.

    I also discovered a problem with Opera (I am using 10.63), and only in Opera.
    When moving between Available and Selected column, there odd to have a few Availables got automatically Selected, even though it shouldn’t have.
    Then if submitted, the highlighted (regardless if it is Selected or Available) will be POSTed.
    Hope someone can figure out what when wrong.

    Also, with regarding post #35, I find that the first line
    only works ID, versus “name=mySelect” in the original code, for example:

    $('#mySelect').append("{option value='99' SELECTED}Value 99{/option}");
    $('#mySelectms2side__sx').append("{option value='99' SELECTED}Value 99{/option}");

    Note: change { with less than sign and } with more than sign.

    Thanks again for the hardwork.

  89. Giovanni scrive:

    I tried to add .removeAttr(”selected”); after clone of selected elements:


    Is this solution right for you?
    If ok I will update the plugin.

  90. John scrive:

    I am wondering if there is some way to configure this so that when items are put back in the original select, they will be sorted in order, and not be placed at the bottom of the list…

  91. hood scrive:

    Hi Giovanni,

    Thanks for the quick reply.
    The fix works for the display side of things in Opera. But when posted, always a few options missed out, and which values miss appeared to be random.


  92. yustme scrive:

    This plugin is very nice, but it has a bad behavior,
    The plugin affect ALL select elements on the page
    I think it should affect
    ONLY the specified ones

    yust my opinion, thanks

  93. Giovanni scrive:


    • for all select in a page: $(’select’).multiselect2side();
    • for the select with id idMySelect: $(’#idMySelect’).multiselect2side();
    • for the select with name nameMySelect:
  94. Giovanni scrive:

    @hood: new version, fix opera bug.
    Now in the demo a result example.

  95. hood scrive:

    Hi Giovanni,

    Using the v0.12 js code. I’ve setup a very simple PHP submit form.
    If you use Opera, swap values between available and selected columns a few times, then submit, it will shows usually only a max of 3 options value can be submitted.
    May be its Opera’s javascript engine’s problem, since its not a problem for Firefox and IE.


    Many thanks.

  96. Yustme scrive:

    Thanks so much
    but the problem was an older version
    now after changing to the actual one
    it works at its best
    thanks again

    a little suggestion for a future version is
    the handling of optgroup for Available options
    like the jdoubleselect plugin
    yust my opinion, thanks

  97. Giovanni scrive:

    @hood: I have tested your page with opera 10.63. It works!

  98. hood scrive:

    Hi Giovanni,

    Sorry to trouble you again.
    I’ve made a screen capture movie on my submitted results.

    Its doesn’t work at my side…

    Very strange.
    Thanks very much.

  99. Pietro scrive:

    Hi Giovanni, this is really a great script!!!!

    I’m trying to pre-populate the right select because I’m editing a form, so I append the values with the code of #35 post. It works but in the post variable – in php – I don’t have the pre-populated values…

    Do I need to do something more than in the #35 post?
    Thank you very much!

  100. Pietro scrive:

    I solved adding “selected=’true’” while appending to the first select.
    Wonderful script! Thanx for sharing!!!!!

  101. walkalong2gether scrive:

    Can please anyone show how to extract selected values, I would appreciate a line of code that works. Thank you in Advance

  102. Giovanni scrive:

    Selected values are in the original select

  103. Paul Vernon scrive:

    Greetings. I like your plugin, thanks. I have found a small bug when you open the multiselect in a thickbox such as we do. Here is a diff to fix the Select All button from breaking:

    Index: jquery.multiselect2side.js
    --- jquery.multiselect2side.js	(revision 506)
    +++ jquery.multiselect2side.js	(working copy)
    @@ -59,7 +59,7 @@
     				"" +
     						((o.selectedPosition != 'right' && o.moveOptions) ? divUpDown : "") +
     					"" +
    -						(o.labelsx ? ("" + o.labelsx + "") : "") +
    +						(o.labelsx ? ("" + o.labelsx + "") : "") +
     						"" +
     					"" +
     					"" +
    @@ -77,7 +77,7 @@
     						) +
     					"" +
     					"" +
    -						(o.labeldx ? ("" + o.labeldx + "") : "") +
    +						(o.labeldx ? ("" + o.labeldx + "") : "") +
     						"" +
     					"" +
     					((o.selectedPosition == 'right' && o.moveOptions) ? divUpDown : "") +

  104. Carole scrive:

    Super script, il m’a sauver la vie pour une sélection multiple de plusieurs centaines d’éléments c’est ce qu’il me fallait.
    Je cherche à modifier le script pour faire un sort automatique lors l’on ajouter un élément dans la liste des éléments sélectionnés mais je ne trouve pas comment modifier le code.
    Merci de votre aide !!

  105. Giovanni scrive:

    @Paul Vernon: can you send me paths at info[at]senamion.com please?

    @Carole: new version with autoSort parameter!

  106. FMaz scrive:

    Very nice plugin.
    We wanted to use it for our right management page (to make the association between users and groups)

    So I don’t need the moveOptions, but autoSort is great.
    However, when I disable moveOptions, I’m unable to select any selected option in order to “remove a right”.

    When I click an option, it get automatically unselected, asin the Demo 2.

    I might now need to re-order my item, but I need to be able to select them if I want to remove them from the selected list …

    Is a fix will be possible ?

  107. Glenn scrive:

    I really like your plug-in. Thanks for all your hard work.

    Unfortunately it doesn’t appear to work correctly using versions of jQuery after 1.4.2 and this is preventing me from upgrading jQuery.

    Thanks. Glenn.

  108. Giovanni scrive:

    @FMaz: bug correct

    @Glenn: i tested this plugin with new jquery 1.5, it seem ok

  109. Antonio scrive:

    This plugin is really fantastic.

    I need to keep selected items, so user can not move them out of “selected items”. I commented the code “rightSel.dblclick” function, but i found that if user select one of these items and press the “delete key”, the item moves out.

    Is there some way to prevent this? I looked at the code, but i am not very used to work with jquery and javascript.

    Thanks, and congratulations for this plugin.

  110. Antonio scrive:

    Ummm… let’s forget my comment #109 because i guess that the “delete key” took my browser’s history back and i was looking at a different form :-)

  111. Antonio scrive:


    i have a strange behavior with IE6 (i would kill IE6, but…)

    Here i have a list of users, one of them is on the selected group:


    With IE6, when i move it to the un-selected group:


    Does anyone have the same behavior? Some idea about how to solve it? I have been dealing with it for long time, but got nothing…


  112. crimsonnail scrive:

    Thank you for a great library.
    I added the option which deleted addAll and removeAll.
    I extended it and the automatic sort option.
    I disclose a source.

    --- jquery.multiselect2side.js.orig 2011-02-26 20:29:30.000000000 +0900
    +++ jquery.multiselect2side.js 2011-02-26 20:29:47.000000000 +0900
    @@ -25,7 +25,8 @@
    labelsx: 'Available',
    labeldx: 'Selected',
    maxSelected: -1,
    - autoSort: false
    + autoSort: false,
    + addAll: true
    }, o);

    @@ -67,14 +68,14 @@
    ((o.selectedPosition == 'right')
    ("›" +
    - "»" +
    + (o.addAll ? "»" : "") +
    "‹" +
    - "«")
    + (o.addAll ? "«" : ""))
    ("‹" +
    - "«" +
    + (o.addAll ? "«" : "") +
    "›" +
    - "»")
    + (o.addAll ? "»" : ""))
    ) +
    "" +
    "" +
    @@ -108,12 +109,13 @@
    leftSel.find("option").eq(0).attr("selected", true);

    - var nLastAutosort = 0;
    + var nSxLastAutosort = 0;
    + var nDxLastAutosort = 0;
    if (o.autoSort)
    allSel.change(function() {
    var selectDx = rightSel.find("option");

    - if (selectDx.length != nLastAutosort) {
    + if (selectDx.length != nDxLastAutosort) {
    selectDx.sort(function(a, b) {
    var compA = $(a).text().toUpperCase();
    @@ -127,7 +129,27 @@
    el.append($(this).attr("selected", true));
    - nLastAutosort = selectDx.length;
    + nDxLastAutosort = selectDx.length;
    + }
    + var selectSx = leftSel.find("option");
    + if (selectSx.length != nSxLastAutosort) {
    + selectSx.sort(function(a, b) {
    + var compA = $(a).text().toUpperCase();
    + var compB = $(b).text().toUpperCase();
    + return (compA compB) ? 1 : 0;
    + })
    + el.find("option:not(:selected)").remove();
    + selectSx.each(function() {
    + leftSel.append($(this).clone().removeAttr("selected"));
    + el.append($(this).removeAttr("selected"));
    + });
    + nSxLastAutosort = selectSx.length;

  113. crimsonnail scrive:

    Hello :-)


    selectedPosition: ‘left’,
    autoSort: true

    When a form was loaded in IE6, I become the script error.

    error message is
    “can’t set a selected property.
    The value of the property is invalid.”
    (Actually, it is output in Japanese.)

    There is not the error when I turn off autoSort.

  114. crimsonnail scrive:

    >When a form was loaded in IE6, I become the script error.
    >There is not the error when I turn off autoSort.

    I solved a problem.

    original source:
    >selectDx.each(function() {
    > rightSel.append($(this).clone());
    > el.append($(this).attr(”selected”, true));

    modified source:
    selectDx.each(function() {
    $(this).appendTo(el).attr(”selected”, true);

  115. victor scrive:

    @Şahin,@Giovanni:how about search function?any plan for?thanks a lot for this function.

  116. Zeki scrive:


    I think this subject has been mentioned before. But I’m still dealing with sort problem. I’m using multiselect2side with FireFox and developing php application. Everything seems to be working but at the result page the order of selected elements seems to be alphabeticaly. But it must be at the order at I’ve selected and organised in previous page.

    But I’ve found the bug which must corrected. It is working correctly when I firs select and move all the items to the left panel then organise, reorder them like I want to see. It isn’t working when you select your items which like you want to be seems.

  117. Giovanni scrive:

    @Zeki: I tested with firefox on this page http://www.senamion.com/blog/jmultiselect2side.html and seem correct.
    You can test by clicking text after the first multiselect.

  118. Glenn scrive:

    Sorry, I didn’t provide any details, so it makes your life difficult! :-)

    Using your Demo 2 for example. If I move Option 2 to the left box and submit the form, I find the following:

    With jQuery 1.4.2 – form.second contains just the elements in the left box. (This is what I expected)
    With jQuery > 1.4.2 – form.second contains all of the elements in the left box AND all of the elements in the right box.

    In both cases form.secondms2side__sx contains just the elements in the right box.

    Please send me an email if you need any further details.

    Thanks for all your help Giovanni.

  119. Glenn scrive:


    Follow up…
    It looks like the selected elements in #second are not being deselected when moved to the left box.

    Thanks. Glenn.

  120. Giovanni scrive:

    New version 0.15 with new search option and a lot of ie6 bug correct.
    New demo!

  121. Giovanni scrive:

    New version 0.16 with new autoSortAvailable option to automatic sort column “available”

  122. Chesko scrive:

    Excellent plugin, thanks for your work :)

    Just two suggestions for possible improvement:

    - First one, a possible bug: when using search option, the “selected” side has the wrong label and is named “available”. I think the problem is in this part of the code:

    (o.labeldx || rightSearch != false ? ("" + (rightSearch != false ? rightSearch : o.labeldx) + "") : "") +

    The last o.labeldx should be o.labelsx?

    - Secondly, an improvement, to select the minSize of the selects through options:

    First part, the default options:
    o = $.extend({
    selectedPosition: 'right',
    moveOptions: true,
    labelTop: 'Top',
    labelBottom: 'Bottom',
    labelUp: 'Up',
    labelDown: 'Down',
    labelSort: 'Sort',
    labelsx: 'Available',
    labeldx: 'Selected',
    maxSelected: -1,
    autoSort: false,
    autoSortAvailable: false,
    search: false,
    caseSensitive: false,
    delay: 200,
    minSize: 6
    }, o);

    And finally the minSize:
    // SIZE MIN
    if (size < 6) {
    $(this).attr("size", "" + o.minSize);
    size = o.minSize;

    Hope this is useful!

  123. Giovanni scrive:


    1) whene search is on I don’t show label of “selected” but search input
    2) ok, I add it in new version

  124. Michael scrive:


    Some remarks about the CSS:
    cursor: hand should be cursor: pointer
    and color grey should be gray

    I think they both will work in MSIE but not in Firefox. Not a big deal though, lovely plugin!


  125. Giovanni scrive:

    @Michael: very thanks

  126. Giovanni scrive:

    New release 1.0 with new optGroupSearch and minSize options and new methods destroy and addOption!

  127. Kuba scrive:

    Hi Giovanni, thanks for your plugin, I found it very useful in my scholarly project :)

    I’ve noticed that if you want to add value which contains spaces, moving and sorting doesn’t work correctly. To fix that issue in every occurence of code like that:

    el.find(”[value=" + next.val() + "]“);

    you should add apostrophes:

    el.find(”[value='" + next.val() + "']“)


  128. AV scrive:

    Hi (sorry for my english)

    I found the same problem like say thw “Kuba”
    the lines that must edit is

    Thank you for your work

  129. AV scrive:

    (Sorry for my English)

    I think I found one bug.
    At line 537 must edit
    value=’” + oAddOption.name + “‘
    value=’” + oAddOption.value + “‘

  130. Giovanni scrive:

    New version 1.1. Thanks to Kuba and AV!

  131. vanarie scrive:

    When I pass labels with single quotes, it throws an error. I can escape or addslashes() that fixes the issue, but where do I unescape them in the display?

    $label = addslashes($label);

    Which places do I add .replace(/\\/gi, “”) in the js to unescape them?

    Very handy multi-select. The filter is handy too.

  132. AV scrive:

    (Sorry for my English)
    I think the option “minSize” do not work. Any value I put I have the same result.

  133. AV scrive:

    (Sorry for my English)
    The script are slow when the items of the list is more than 200, and make more slow when the autoSort, autoSortAvailable are true.

  134. bhavana scrive:

    I wanted to know is it possible to refresh the left list dynamically?Suppose we add the selected items to the list on the right side, i was wondering if there is an ability to remove these selected items once they are selected.


  135. bhavana scrive:

    i meant removing items from the right side,what i need is once the user selects the options in the right list, based on my code logic i should show them that these items are already selected and refresh the right list without the items which were selected.

  136. Ann scrive:

    Love the plugin – it does most of what I need in my application. I like the grouping feature for available options.

    However is it possible to add a “dedupe” functionality so that if an option is repeated in the otpion groups (which is necessary in my application), that on moving those groups to the selected side, only the options that do not exist yet (in the selected side) are added?

  137. Eric scrive:

    Love it. Is it possible to add a method to deselect everything? I know there’s a button, but I mean a method that I can have an external force call?

  138. Elliott scrive:

    Hi there, really great plugin. Thank you.

    Just in case it helps someone else, there’s an incompatibility between Chrome’s back button and the autosort parameter(!). If you have:

    autoSort: true,
    autoSortAvailable: true

    and you submit the form, then click the back button in Chrome, the list of selected items is corrupted. If you then submit again you may be submitting completely incorrect data.

  139. Chris Miller scrive:

    Love this plugin, but have you consider using the jquery ui css? That would allow your control be work with jQuery UI themes. You would be able to shrink the size of the payload by using existing glyphs and css.

Write a comment