jQuery Combo Select Redux

by Jason.

As a followup to my previous post on creating comboselect boxes in jQuery, I have automated the process of transforming a normal multiselect input element into a comboselect with the (aptly named) comboselect plugin.

With the plugin, you start with a normal select input, and transform it using a few simple options. You can decide which sides get resorted after a change (none, left, right, or both), and also specify the labels for the buttons which control movement from left to right and vice versa. You can also move items from side to side by double clicking them. The default sort option is “both”, and the default button labels are “>” and “<”. The plugin passes the list of selected items back to the original form input, so the form submission works the same regardless of whether the plugin is used.

Sample usage is as simple as:

$('#somelist').comboselect();

Or, with options:

$('#somelist').comboselect({
	sort: 'right',
	addbtn: ' Add ',
	rembtn: ' Remove '
});

To see the plugin in action, check out this simple demo page:
http://devblog.jasonhuck.com/assets/comboselect_plugin/

You can download the comboselect plugin here:
http://plugins.jquery.com/project/comboselect

The download contains the source of the demo, including a sample CSS file and the Selso plugin, which is required for sorting.

Be Sociable, Share!

38 Responses to jQuery Combo Select Redux

  1. Ivan says:

    Wow, this is really nice. It doesn’t have the whizbang of a usual plugin, but it’s just the right level of implementation. From here, css can take over and make it gorgeous. Nice work! Man I love JQuery.

  4. fedmich says:

    Nice work man. I just wished I saw this long time ago. I made a completely similar function last year using javascript only. Back when jQuery still isnt around. Thanks anyway :)

  5. Chris says:

    Looks great. just curious what happens when:

    1. The form is submitted. Is the state in the hidden original multi-select so that the server coding is the exact same when processing what was selected?
    2. If the multi-select has items selected when the page is drawn, will they appear correctly in the side-by-side, or will it be blanked out?
    3. If there is existing javascript based on the original multi-select, will it work? i.e. each time an item is moved in the “left” and “right” ones, will it keep the hidden one up to date so that existing javascript will still work?
    4. When the page is drawn, is there flicker when you see the original, then it is transformed into the side-by-side?

    Thanks!
    Chris

  6. Jason says:

    @Chris:

    (1) The choices made in the combo-select are applied to the original select element behind the scenes as the user makes changes, so when the form is submitted, it’s as if they had manipulated that input directly and everything is submitted normally.

    (2) That’s not explicitly handled in this version, but it should be, and it’s easy to add. I’ll get an update posted…sometime…

    (3) Good question. I would expect the manipulation of the original select to cause a “change” event, so anything bound to that event should fire. If not, we could force a change event in the plugin, but I think the best approach would be to bind the events directly to the generated elements instead.

    (4) Not that I’ve noticed thus far…

  8. Russ says:

    If the select is not the immediate child of a form, the plugin fails to copy the options over. Changing this line:

    // the form which contains the original element
    var theForm = ${this).parent(‘form’);

    to:

    var theForm = $(this).parents(‘form’);

    seems to do the trick for me.

  9. Metin says:

    Hello Jason. Great plugin! But I think, I’ve discovered a bug:

    http://pastie.org/211365

    Afrer removing all of the selected options from the second combo and submitting, I still get “val1″ and “val2″ options seleted in POST variable “myselect”. In other words, array that gets submitted is not empy.

    Am I doing something wrong?

    Thanks!

  11. Jason says:

    Thanks, all, for the feedback. I’ll try and get new release together with some bug fixes posted soon.

  12. Dio says:

    This plugin is good, if you don`t use any additional code. In other hand if you use some ajax function. Everything go down.

    If you use ajax result to fill the initial and try to set the same to comboselect
    every time when ajax function is called ,

    You get 2 x comboselect (and you want to overwrite the old one).

    I believe this is happening because the initial and the next …. next select you want to set to comboselect has same id.

    Can I ask you to fix this and to write some deselect method.
    With deselect method the plugin will be more flexible.

  13. Dio says:

    I forgot something.
    When you use ajax to fill the initial select and try to set the same select to comboselect
    You doesen`t really get what you want. the clone of initial select is empty.

  14. Daniel says:

    Im having the same problem. Im using ajax to fill the initial select box (options come from a database).

    My select box is dynamically generated. But the plugin doesnt copy any of the options from the select box into the new combo box, but it does hide the original select

    Im not sure whwre to go with this

  16. Borys says:

    Hello,
    I’ve made some improvements to your code and I’d like to send them to you. If you’d only put your e-mail somewhere…

  19. Jason says:

    @Vikram – I don’t see any problems in IE6. Could you be more specific about what you believe is incorrect behavior? Thanks!

  20. Vikram says:

    404 – File not found

    The page you requested is no longer here [error 404]

    Try the site search on the right or click through the menu.

  21. Vikram says:

    hi Jason,

    Select some options in all the drop-downs and click on 1. Click here to transform the selects.
    you would see that the comboboxes on right side are not getting populated at all. (all the comboboxes are blank)

    Could you please suggest some workaround here?

    Thanks in advance.
    Vikram

  22. Vikram says:

    Hi Jason,

    Also one more problem is when you try to add a value from left to right, the value gets added to right side but
    IE shows following error message: Line24, Error: Could not set the selected property. unspecified error.

    Could you please suggest some workaround here?

    Thanks in advance.
    Vikram

  23. Vikram says:

    I have also checked for your latest code as per your comments:
    [Version 1.0.2 includes fixes for several issues reported here and in the jQuery plugin repository:http://plugins.jquery.com/node/3285

    Still I am facing the issues in IE browser with this plug-in.

    Please suggest.

    Thanks,
    Vikram

  27. vikram says:

    Hi Frobzz.. cheers dude! You have figured out the exact problem with IE browsers.

    Error: ComboSelect fails to move the options with the attribute selected to the new select box.

    Reason: var opts = $(this).find(‘option’).clone();

    opts doesn’t really maintain selected state of options. So, problem is inside the clone() function, not combobox plugin.

  28. Brett L. says:

    Hey Jason -

    This is a great piece of code, thank you! I ran into an interesting issue while using it on an application we’re developing. Without boring you with the gory details, we have a tabbed interface (an “add” tab and an “edit” tab) that show similar information. Both use the same list of locations – on the “add” tab you select the locations you’re assigning, while on the edit tab you can edit existing location assignments (populated as you go through a select box).

    Long story short, we ran into an issue where the sort wasn’t working on the second list (on the edit tab) but everything else was. It struct me while working on a fix that it’s something that could potentially affect other UIs that have more than one of these comboselects on it. I’ve revised the code to accomodate this special case, LMK if you want to take a look.

  30. Mark King says:

    Hi.

    I replaced your submit function with this one – it allows me to save the items in to the database in the same order that they appear in the list.

    I thought someone might find this useful (or be able to improve it).

    $(‘#’ + selectID).find(‘option:selected’).removeAttr(‘selected’);
    $(‘#’ + rightID).find(‘option’).each(function(){
    var val = $(this).attr(‘value’);
    var text = ”;
    $(‘#’ + selectID).append(
    $(‘</option’).val(val).html(text)
    );
    });

    I left the text out because I don’t need it – I am just saving the ID into a bridging table.

  31. jorge says:

    Hi,
    If you submit the form with Ajax plugin you need to be aware of pre-serialize event, so I added a listener to the form:
    theForm.bind(‘form-pre-serialize’,function(){
    …..
    ( duplicate previous submit handle )
    }

    and now it works fine.
    A good job.

  32. Son Nguyen says:

    This is great! Thanks for sharing.

    Is there any plan/guide to support ? I might try to read and modify your code to add this support for our purpose.

  37. paul says:

    Great plug, but currently not working in jQuery 1.4 + IE8
    Items are not moved to other side, and selectboxes ‘freeze’