03 Sep

multiselect

NOTE: This post is now obsolete. Please click here to find the most recent mention of the script.

Donncha pointed this out to me. It’s an improvement over the standard multi-line select box in that you don’t need to know the magic key combination for selecting a second item without losing the first.

I didn’t like that it adds to the bulk of the source code, though! So, here is an improvement.

As usual, I’ve left the source as simple as possible. The javascript checks the document for any select lists that have multi-line support, and converts them to a checkbox list instead.

To use, simply copy the javascript to your site, link to it in your document, then make a multi-line select box as you normally would.

NOTE: Your multi-line select box’s name must end in ‘[]’. While this is against some rules for HTML, it is, AFAIK the only way to make a multi-select work in any case.

update: Michel pointed out that the code only works on the first select box found. I’ve updated the code to fix this. Thanks, Michel!

update (2004-10-07): Thanks to Shaun Walbridge for spotting an intermittent NULL problem. Code has been updated to reflect that.

update (2004-11-04): Thanks to Jeff Hansen for requesting that the script support the HTML disabled attribute. It now does.

skyinsight.net – an example of the tool being used for selection from a large list.

update (2004-12-02): Thanks to Bruno Henry of UPS France for pointing out that the script does not initialise pre-selected items correctly in IE. This was because of this bug here. The script has been corrected to reflect this.

update (2004-12-16): Thanks to Cameron for his interesting method of defining whether a select box is multiple or not. It has been incorporated.

24 thoughts on “multiselect”

  5. Al -

    This is GREAT!!! I simplying included the script and it works.

    Now I just need to figure out how to reselect the same options when the user returns to the form via a link that passes with is, in the form of a URL variable, the the original options.

  6. Andrew Clute -

    Is there a way to not make the elements be right-justified in the box? Left justified would be so much better!

  7. Kae -

    You can change the order of the elements by editing the script. Maybe the easiest way is to remove the margin and padding lines, float the checkbox to the right, and add a “clear:both” to the spans.

    This sends the items in an array. Make sure to add a ‘[]’ to the select-list’s name. To read the items, just treat it like an array. For example, if you want the array to be called anArray, then in your HTML, call it anArray[]. You can then access that array, in PHP, by calling it through $_POST['anArray'] (or $_GET – whichever is appropriate).

  8. Anonymous -

    Hi,

    Great idea. Select box should have inbuilt options to produce such output.

    I think instead of checking the size of the select box, you should check for the multiple field

    if(a[b].size>1) == > if (a[b].multiple)

    Thanks,
    Dawa:-D

  9. Kae -

    Dawa, I’ve tried that (the .multiple), and it did not work.

    A quick check of the specs reveals as well that browsers are not required to present this in any particular way – it merely describes its functionality – browsers simply present this as they do because it was the choice of the developers. My guess is that it would not be too hard to hack firefox to provide a selection-box like this, but it is up to the developer, really.

  10. Cameron -

    Kudos and a suggestion

    This script is awesomely impressive, I’ve been struggling with the problem of some of my clients not having javascript enabled. With this method, it will not matter whether or not the javascript is available. If it isn’t the user gets a “regular” multiple select box.

    My suggestion:
    use the following:
    if (a[b].name.substring(a[b].name.length-2, a[b].name.length) == "[]"){
    instead of the line that checks the size
    ( if(a[b].size>1){)

    Advantages: This solves the problem addressed by Dawa’s suggestion and it doesn’t require anyone to use the “size” attribute. The size attribute isn’t required by browsers and it sure confused me since I didn’t have a size attribute.
    Nothing is lost by checking for the square brackets at the end of the name, if the square brackets aren’t there, the multiple choices won’t be passed to the action page anyway. Yes, I learned this the hard way (*Sigh*). Instead, only the last selected element is passed. If you are running into this problem, make sure the name of your select object ends with square brackets: name=”mySelect[]”

    Enjoy and Thanks!!
    CAM

  13. Kae Verens -

    Dave – took me a few seconds to work out what was meant by that line of code. I am not sure that that form of syntax is supported by all the target browsers. I’ll test it after the christmas holidays (I’m currently on the GF’s parents’ machine), but I think Cameron’s solution is probably the ideal.

    Then again – maybe I should formally ask for opinions on the best way to detect whether a select box is multiple or not…

  14. Adalius -

    Is there a way to verify that an option was selected before it’s submitted while using this version of a multiselect? My form has an onSubmit handler that verifies all the data entry but checking that selectedindex>0 doesn’t seem to be working with this…

  15. Kae Verens -

    The answer is to rewrite your javascript checker. All you need to do is check each of the newly created checkboxes for their values. As your checker requires javascript to run, it’s safe to drop the original selectedIndex check. There is no simple one-liner for it, though…

  16. Víctor Rodríguez -

    Nice script.
    If you put the text of the option in a “label” tag with an appropiate “for” attribute containing the “id” of the checkbox, the text will be clickable, like the checkbox. That would make it nicer 😉

  17. Kae Verens -

    great idea, Víctor. I’ll put that into the script later on, when I have a bit of time. looks like it’s time to gather up all comments on this, and group them into a new article on the subject.

  18. Quinten -

    Looks like this doesn’t work with Safari on Mac OS X. I’ll submit more details when I have a chance.

  19. kae -

    I’ll check it out today. I have a “select all” and “select none” improvement to add in anyway. I’ll make sure it’s working in the big three (IE, Firefox, Safari). maybe I’ll even look at opera and khtml 🙂

  20. Pingback: klog » Blog Archive » multiselect updates

  23. Pingback: roll your own multiple select listbox - Justinsomnia

Comments are closed.