jQuery Combo Select Redux
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.
This blog.
Twitter
LinkedIn
Delicious
FriendFeed
Flickr
Facebook
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.
[...] jQuery Combo Select Redux (tags: jquery) [...]
[...] jQuery Combo Selector [...]
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
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
@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…
I have updated the plugin to correctly transform select elements which already have some options selected. Latest release is here:
http://plugins.jquery.com/node/2706
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.
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!
The demo at http://devblog.jasonhuck.com/assets/comboselect_plugin/ not working for me in IE7. It does not move selected options to right side select box initially
Thanks, all, for the feedback. I’ll try and get new release together with some bug fixes posted soon.
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.
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.
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
Version 1.0.2 includes fixes for several issues reported here and in the jQuery plugin repository:
http://plugins.jquery.com/node/3285
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…
This plugin is not working properly for IE6, Even if you check the demo site given for this plugin
i.e: http://devblog.jasonhuck.com/assets/comboselect_plugin/?myselect=CCC&myselect=DDD&myotherselect=333&myotherselect=666&myajaxselect=B2&myajaxselect=E5&go=go
This also dont work as desired in IE6.
Could you please suggest any fixes needed for IE6?
Plugin NOT working for IE browser
@Vikram – I don’t see any problems in IE6. Could you be more specific about what you believe is incorrect behavior? Thanks!
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.
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
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
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
Hi Jason, Are you able to reproduce the IE issues, which i am suffering?
I think I found the workaround for IE6/7 browser. Please visit plugin comment at http://plugins.jquery.com/node/4374
Hello,
thank you, this tutorial has me very helped.
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.
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.
Thank you … this tutorial has me very helped.
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.
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.
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.
About my last reply: I didn’t know the form accept “optgroup” tag as-is.
One little gotcha that I found: if you use button with onclick event instead of type=submit, the form submit event won’t bind properly.
[...] jQuery Combo Select Redux [...]
[...] .zip includes the selso plugin as a dependency for handling sorting. Check out Jason Huck’s original blog post announcing combobox for a demo and more [...]
Great plug, but currently not working in jQuery 1.4 + IE8
Items are not moved to other side, and selectboxes ‘freeze’
Not working. Impossible to make it work on IE and a headache.