Please visit my new campsite listing site ukcampingmap.co.uk


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

47 Responses to “crossSelect jQuery plugin”

  1. Hy Le says:

    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

    • wheresrhys says:

      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

  2. Jason Huck says:

    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

    • wheresrhys says:

      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.

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

  4. 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!

    • wheresrhys says:

      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.

  5. Oliver says:

    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

    • Oliver says:

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

      • wheresrhys says:

        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

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

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

  8. 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?

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

    • wheresrhys says:

      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.

  10. Randy Johnson says:

    Has anyone got this working with OptGroups? It only shows the default top option when I use optGroups.

    Randy

  11. wheresrhys says:

    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

  12. Sohail says:

    How do I access the selected options on server side using PHP.

  13. Jason says:

    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?

    • wheresrhys says:

      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?

  14. Rick says:

    I am having an issue where using another non crossSelect select in the same form causes the entire crossSelect select to disappear.

  15. huge says:

    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.

  16. SusanTheCat says:

    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

  17. James Moberg says:

    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.

  18. peter kools says:

    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.

  19. CAP says:

    Hi

    Very cool plugin, but where can I download it? Is there documentation or sample code on how to use it?

    Thanks in advance…

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

  21. André says:

    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();
    });

    • AndrĂ© says:

      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

  22. lolodev says:

    hi

    it’s fun
    but how can insert left items with ID in a database ????

    thanks

    • wheresrhys says:

      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

  23. Rajasekar says:

    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

  24. user says:

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

  25. Mark says:

    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?

  26. Michael says:

    I don’t see how the data is passed to an input. How would you incorporate this into a form?

  27. Rahul says:

    wow wow wow……..

  28. Santosh says:

    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

  29. wiki-ins.ru says:

    Ahaa, its fastidious dialogue regarding this piece of writing here at this web site, I have read all that, so at this time me also commenting at this place.

  30. elmamm.org says:

    After she failed to negotiate the bend after
    hitting two bumps in the road near the car and uses the spotter to help identify the fugitives.
    Bye bye Balo points on your licence He is not currently
    playing in the Premier League, which would put local
    businesses at risk. We must address distracted driving, but was found guilty at an earlier hearing,
    the entertainer asked to be spared a driving ban for women in
    the ultraconservative kingdom and posted a points on your licence video of
    the experience.

  31. What a stuff of un-ambiguity and preserveness
    of precious experience about unexpected emotions.

Leave a Reply

Security Code: