crossSelect jQuery plugin
I thought I should write a short post to say I have written another jQuery plugin, for making multiple select form elements more intuitive to use. It’s called crossSelect, and here is a demo.
One of these days I will make a proper portfolio site/subsite which collects all the stuff I make together.
I will, I will, I will!
No related posts.
Tags: crossselect, jquery, multiple, plugin, selection
Thank you for your nice work!
May I suggest the “click” option – selecting by clicking on an item on the left will insert/ move it to the right.
Best wishes
Good idea – I’ll add it as an option in the next release, though I’ll still keep the current setup as default; a big reason for creating the plug-in was that the multiple select box is unintuitive for inexperienced internet users, so I think it’s a good thing to have a button saying “select”
Cheers
I wrote a very similar plugin a while back. See:
http://devblog.jasonhuck.com/2008/04/25/jquery-combo-select-redux/
At a glance, I believe the primary difference between the two is that mine incorporates some sorting options.
- jason
Nice! I think probably a bit more economical than mine too. I didn’t even consider using multiselects as the columns as eventually I want to have some better skins for crossSelect.
G’Day Rhys, nice plugin, for what is a very common need.
One thing I noticed which may/may not be an issue: if you click an item in the right-hand list, then click an item in the left-hand list, the ‘remove’ button remains active.
I’ve seen others deal with this by allowing active selections in both lists, or by disabling the ‘remove’ button if the left list is clicked.
Hope this makes sense!
Keep up the great work,
Thomas
Thanks Thomas – I’l fix that in the next release
nice plugin – im also using asmselect query plugin for similar needs but i agree that sometimes this is the most intuitive UI element. checkout asmselect though, you might work some ideas into yours…
PS i cannot BELIEVE that you used the fall and the rise of Reginald Perrin – i watched that show on BBC religiously from the time i was about 6 and to this day i have never met ANYONE who heard of that show!
Thanks Jon. I’m delaying doing another release as there’s so many variations to do with selecting elements – what to do on double clicks for instance – and I haven’t decided which direction to take it in yet.
I haven’t seen Reggie Perrin since I was a kid too, but I think it’s a lot more well known in the UK (though still criminally under-rated). They’re remaking it soon, with a new actor in the lead called Martin Clunes. Her’s pretty good, but can’t see him beating the original.
First I want to say many thanks for your work with this plugin. It is working really well.
And second, May I ask you if there is any option to leave a ‘shadow’ of the selected items in the left box ?
I am using a nested tree and it will be very useful to see the whole tree at all times.
Oliver
Ahhh, just simple:
Change in crossSelect.css (line 56-59) to whatever you want. e.g.
.jqxs_optionsList li.jqxs_selected
{
// display:none; ORIGINAL
color:grey;
}
This is a bit dangerous though as the ‘shadow’ will still be clickable, potentially allowing many copies (say 2) of the same item to be moved across to the selected side, then when just one is deselected (leaving 1 item appearing to be selected) the <option> will be unselected.
I will however add an option to leave shadows in a future release
I\’ve got your select element pasted into my template. It doesn\’t change at all, as if the js wasn\’t even there.
I\’m using JQ 1.3.2 and that, along with your file, and my own, seem to be linking correctly (I can copy paste any of these urls from the template that is loaded to my browser into a new tab and the source is all there). I point this out because I\’m using the SilverStripe cms and I\’m new to javascripting with it and I wasn\’t sure the files were even loading, perhaps to a wrong URL.
So to test if your function is being called: I changed it to:
jQuery.fn.crossSelect = function(options) {
alert(\’hello hello\’);
};
I\’m not seeing the alert. This should deliver the alert on page load, right? Does this mean the call to your function isn\’t being made in my own js file that loads?
Can you give me some pointers on troubleshooting this?
Update:
I can get your function to call now. For some reason:
jQuery(‘select[multiple="multiple"]‘)
doesn’t work but just jQuery(‘select’) does. My select menu *does* have the multiple attribute though, so that is strange.
Your function still isn’t doing its thing though. To test it, this time I just added an alert statement into the top before your other code. The alert works now but nothing else seems to be happening.
Update:
I can now see I’m getting this error on line 63 of your code:
$(this).attr is not a function
which is coming from here:
if($(this).attr(‘multiple’) === true)
I think I understand how to fix this. Since using $() syntax isn’t even an option with the SilverStripe CMS because all JS is inserted automatically just above the body closer, and proto loads after my custom stuff…
the only solution is to change out all occurrences of that in your source.
I suggest in future updates not to assume your users have that option. Probably best to go with the long format, right?
Rats.
Well, I did a mass replace on every occurrence of $() I got a different error now. I traces it to this line which doesn’t execute in FF or Safari on my Mac:
if(jQuery(this).attr(‘multiple’) === ‘true’)
so I changed it to:
if(jQuery(this).attr(‘multiple’) === ‘multiple’)
Now, I can see stuff finally changing on the page, but more stuff is buggin’ out. t. All the buttons say “undefined” and the box at the right isn’t building. It’s just a little dot in the page where the box should be.
I’m over my head on this one. If you have any tips let me know.
Without seeing the website you’re working on I doubt I can be much help. The only thing I can suggest is to make sure you have the absolute latest release of the plugin as the previous version did have one or two serious bugs.
In the next release I might cahnge all the $’s to jQuerys. The main reason I’m reluctant to is that using the full name makes the code much less readable, so there’s a definite trade-off there.
Good luck with getting it to work.
Has anyone got this working with OptGroups? It only shows the default top option when I use optGroups.
Randy
It’s not written to work with optgroups. It’s on my to do list for future releases, but for the time being it won’t work at all with optgroups – sorry
How do I access the selected options on server side using PHP.
The way to do this (independent of the plugin) is to give your select field a special name attribute.
Instead of having name=”mySelect” go for name=”mySelect[]“, then in PHP you should be able to access the selected items as you would items in a PHP array.
Hi! sorry im having a lot of problem with this! can you please explain a little bit more about how to get ONLY the selected fields with php so I can add it later on to a database! id appreciate the help!
You might find this helps: http://stackoverflow.com/questions/1063385/sending-multiple-records-to-mysql-from-multiple-select-box
I’m experiencing an odd behavior when I implement xselect plugin.
The LIs in UL.jqxs_optionsList are all missing their contents. When I disable the “width:0″ inline style using Firebug, the content appears. I can see the LI contents in the HTML when I view the generated source, but it doesn’t render on screen.
Have you seen this before?
I’m not sure why this would be happening. The code for setting the width relies on momentarily adding a span to the DOM , measuring its width and then removing it, so maybe you have some CSS rules which affect the width of that span?
I am having an issue where using another non crossSelect select in the same form causes the entire crossSelect select to disappear.
I should add that it is visible until you make a selection in the non CS select.
Thanks for this.. reminds me of http://www.pengoworks.com/qforms/docs/examples/containers.htm
if you could make this into a multi select box that can submit all the values as either a string or an array, you would have a small killer app.
Are there any plans to add filtering capability?
The one thing I miss is being able to type the first three letters of the option and have it scroll to that section.
I was thinking about adding a text box below the scroll box and filter on text box change.
Any thoughts?
(I’m not asking you to program it, I just wanted to be sure that you weren’t going to release this functionality two days after I finish coding it. :) )
Susan
I’m not really planning any further development, although before you go any further I’d also take a look at jQuery ui multiselect.
I checked out jQuery UI MultiSelect and the previous version worked, but the new one is having issues with UI. (Not sure.) It looks like it won’t be developed further according to the 10/12/2009 blog post. :(
http://quasipartikel.at/2009/05/10/jqueryui-multiselect/
I tried your script with 1.4.2 and, since it doesn’t have any UI requirements, works quite nicely.
I like the PengoWorks qForm demo w/element sorting, but I am looking for a solid jQuery solution at this point.
Nice, straight forward plugin. I made one enhancement to support text headings for the option and chosen lists. Happy to send the modifications to you if you want them.
Hi
Very cool plugin, but where can I download it? Is there documentation or sample code on how to use it?
Thanks in advance…
Hi!
Nicest I’ve seen around (it’s always good to provide a stylesheet so that it’s really a drop-in solution :).
May I suggest two things:
– an option to hide the “add all” and “remove all” buttons.. sometimes it’s not needed in the interface, and in fact, it’s a risk of losing your selection.
– an option or a button to reset the values to what was there before we started tweaking the values
that would be awesome :)
thanks again for your cool plug-in!
Alexandre
Hi!
I’m running into a little problem:
When the select is inside a hidden container, the options does not appear properly. Looks like they’re only appear 1px wide. Look at the screen shot below:
http://img171.imageshack.us/i/crossselect.png/
This is the basic code to reproduce the bug
#hidden
{
display:none;
}
1
2
$(document).ready(function(){
$(‘select[multiple="multiple"]‘).crossSelect();
$(‘#hidden’).show();
});
My bad, I’ve forgot to remove the tags
style type=”text/css”
#hidden
{
display:none;
}
/style
div id=”hidden”
select multiple=”multiple”
option value=”1″ 1 /option
option value=”2″ 2 /option
/select
/div
script type=”text/javascript”
$(document).ready(function(){
$(‘select[multiple="multiple"]‘).crossSelect();
$(‘#hidden’).show();
});
/script
The important thing to reproduce the code is that crossSelect must be called before it is shown
hi
it’s fun
but how can insert left items with ID in a database ????
thanks
I’m not sure I inderstand the question exactly, but if you search google for “handle multivalue form” + [your server side language], this should come up with some useful information. How you store your data in a DB is completely independent of what this plug-in does
I’m Using ur crossSelect Plugin.. I need to get the right side box values in next page when i submit the form…
help me.. urgent
Just a note jQuery 1.6+ broke this plugin with the changes made to attr(). Should be a fairly simple fix, most of the .attr(‘selected’) === true code needs to be changed to .prop(‘selected’) (same thing for “multiple”, and “disabled” properties).
1. Bug: select multiple entries with shift + mouse click. The selected entries are partially highlighted.
2. How to remove “Xxxx All” buttons? How to replace buttons with custom images?
I don’t see how the data is passed to an input. How would you incorporate this into a form?
wow wow wow……..
First i want to thank u for providing the plugin.
I have one question please answer for this.
I am trying to include this cross select plugin in one div using jquery request. But i not including the scripts into the div. Due to this i am getting only multi select box and not getting the cross select effect.
Could you please provide me the solution for this.
Thank you