son of multiselect

There have been a few fixes and upgrades to the multiselect code since the last announcement.

For those of you new to the idea, the multiselect is a tool for providing a more friendly version of HTML’s <select multiple>, using checkboxes, instead of the clumsy CTRL+click method that was there before-hand.

To make sure of backwards-compatibility, the script uses what has become known as “Unobtrusive JavaScript” – ie; if you don’t have JavaScript enabled, it will make little difference to the end result.

here is the example.

The new code adds the following functions:

  • The all, none, reset links may be turned off by changing the show_toplinks variable in the source to false.
  • The script does not force you to use ‘[]‘ symbols. This is good news for JSP developers, and other users of non-PHP languages.
  • You may now mark individual <option>s as disabled.

As usual, instructions for use are:

  • Get your multiple select working properly in plain HTML first.
  • Link to the external script.

Thank you to all the commenters on the previous version.

81 Comments.

  1. Excellent work, but I have come across a problem. The script seems to render the ID tag useless, meaning I cannot use getElementById to select certain values.

  2. davidbisset.com » Radio/Checkbox Customization - pingback on May 1, 2005 at 11:33 pm
  3. Lewis, the ID tag does become useless, yes. This is because a totally new element group is created, and the original select-box is destroyed.
    This is meant to be an easy-to-insert usability improvement for select-boxes. It would be very difficult to make it behave exactly like the original selectbox.
    You should be able to change your source code to affect the newly-created checkboxes instead of the old select-box.

  4. Hi, Thanks, I fixed the problem by including the javascript to change the select boxes at the bottom of the page.

    Just ot let you know, your site has errors in MSIE, and also the labels don’t work in MSIE.

  5. what does this mean: and is there sameple code?

    Lewis says:
    Hi, Thanks, I fixed the problem by including the javascript to change the select boxes at the bottom of the page.

  6. oh .. i think i understand… um.. will some browsers have a problem without having the id tag? Is this why i was havcing problems passing the values from my origianal (and seprate) form to submition (seperate) page? if so.. how can i get past that ? or work around it?
    (are there any other ramificaitons?)

  7. very nice example… should work on the newest browsers…
    somebody tried with a linux or mac OS browser ??? i am using a win-firefox browser…
    greetings from germany 😉

  8. I wrote it using Firefox in Linux.

    A quick test shows me that it renders weirdly in Konqueror. Thanks, Citos – I’ll fix that later today (and Stripe-man’s class thing as well)

  9. …dont worry… the ID-tags are W3C-Konform… ist a standard vor HTML v4.0…all the leading and being used browser can handle them…
    keep typing…

  10. Works OK in Firefox on MacOSX 10.2. Thanks Kae!

  11. any updates lately!! ???

  12. um… I was looking to see what option or var i change so that it ONLY looks for selects with ‘[]’ in the name. before this line worked:

    if(ms.name.substring(ms.name.length-2,ms.name.length)=='[]’){

    but things have changed a bit since last i tried to use it…

    THanks for any assist!!

  13. lol! patience! i’m afraid i’m incredibly tied up with a few things at the moment which i think are higher priority for myself at the moment. working on curves for firefox, release .4 of webme, and a pattern recognition net for a gardening robot.

  14. oh ok! LOL I didnt mean anything by it!! I thought that paticular feature was already there and i was over looking it!

    Will wait patiently! 🙂

  15. Excellent code, thanks for your efforts in making a really unfriendly interface into a usable one.

    I had an issue with the options overflowing the border of the control when show_toplinks=false. It looks like when show_toplinks=true you subtract four more pixels if it an IE browser. I put in place the same math for when show_toplinks=false by changing the line to the following:

    newmultiselect.style.height=show_toplinks?height-(isIE?19:15)+”px”:height-(isIE?4:0)+’px’;

    It seems to have fixed the problem.

  16. I wanted to control this with an external CSS file. Todo so, comment out all the style lines. Then, add this.

    wrapper.id = ms.id;
    Taking care to give your select boxes id’s so it is copied to the converted code.

    Then you can control with css styles of

    #idname {}
    #idname label {}
    #idname label:hover {} /*nice rollover effect*/
    #idname input {vertical-align:middle;} /* makes sure the checkbox is aligned to the middle with the text */

  17. How are your projects going Kae ? Im curious about the Gardening Robot!

  18. lol! I’ll have an article up about it soon. Basically, the bot is a brick at the moment. It’s a very small (20cm x 20cm x 5cm) wooden box which is wirelessly networked. I’ll write up an article on it when I’ve successfully managed to power it by battery and get it to move itself with motor-driven wheels.
    To get back on topic here – I have no new code yet to announce, but there are many ideas in the comments for people to play with.

  19. » dynamically loading external JavaScripts with AJAX « klog - pingback on August 2, 2005 at 2:12 pm
  20. I’ve got a couple things to add. First, I applied the updated script and I had to tweak my css solution slightly.
    Still add
    wrapper.id = ms.id;

    And remove all the javascript styling of the div and label elements. Then you have the following css to define.

    #idname /* this is the wrapping div */
    #idname div /* this div is where height and overflow needs to be set*/
    #idname a /* controls the all, none, reset links */
    #idname label /* the label */
    #idname label:hover /* adds a nice effect */
    #idname input { vertical-align: middle } /* again, this aligns the text with the checkbox */

    For those curious on my formatting, see http://www.e-freehold.com/search.html

    Also, you MUST use for all your options. If you omit the value=, Internet Explorer will not work right when it submits the data. So make sure to define the value. This seems obvious to me now but I made the mistake and it caused this bug.

    Finally, I’d like to also say, really great script. This is a usability dream for multiselects. Nicely done and thanks for sharing this with us all.

  21. Very nice formatting, Josh B! I’ll be showing that to my designers when I get into work today.

  22. Josh B ,
    I really like what you did for that…http://www.e-freehold.com/search.html

    I was trying to use what you had done on my site.. everything is fine but the checkboxes dont show…

    can you help me ?

    Thanks much!

  23. oh.. btw.. Hello Kae!!!

  24. ok ok.. silly me.. I got it working.. …
    But my question still remains.. there are some muliple select boxes that i dont want to ahve the check box.. the reason is because i have a 4 part selects that update each other based on what you select from another…

    How do i tell the others not to pick up the properties of the muliselect while keeping it on the others ?

  25. One more question for you Josh B…..
    The mouse over effect works great for Mozzila.. but most of the formating (besides bgcolor) is removed on IE …. did I do something wrong ?

  26. To make it a little bit more functional, I added code to mimic (follow) the onChange functionality of the multiselect. Now, when a checkbox is checked or the all/none/reset buttons are clicked, the default onChange functionality is called. A small change to your OnChange event handler allows for both versions to be handled in one function. Email me if you want the code 🙂

  27. Stripe-Man: Re: some multiselects, not others.

    one way I have considered doing this (because I can see a need for this as well) is to use CSS to “flag” things. You can set multiple class names as styles in HTML. Have one of them (not even defined in a CSS file) be the name of a “flag” CSS class that signifies that you don’t want it transformed.

    Example: ……

    Then, you simply check for the NoCBReplace class in your code in the if(ms.multiple) line

  28. Stripe-Man: Re: some multiselects, not others.

    The example code was cut in my first post:

    Example: <select name=Select1 id=Select1 class=”MultiSelect” multiple>…</select><select name=Select1 id=Select1 class=”MultiSelect NoCBReplace”>…</select>

  29. GReat…. so your working on that now ? LOL

    and yes.. please do provide the code (your email address is not linked to your name so i can not get your email addie! LOL

    pleaes email me to @ stripe-man@stripe-man.com

    Thanks so much…

  30. I haven’t done it yet, but it’s a pretty easy job and I can probably take care of it in an hr or so, so perhaps over my lunch break today I’ll throw it together for you.

    I’ll email it to you when I’m done.

  31. LOL wow.. ok… i cant wait to see it! LOL

  32. Possibly not – most people that work in open source do it in their spare time. I know for a fact that there is work I’ve been meaning to do for months (this, for example I haven’t touched in half a year).
    Try working it out yourself and posting what you come up with – if it’s anywhere near useful to people, then they will reply with either bug-fixes, or further improvements.

  33. Got Ya Kae ..thanks… i will try… and i know what you mean about OS and totally understand… I will try to work this out… and post back if I make headway on it.. thanks agian…

  34. Sorry man, I got pretty busy at work.

    I changed the line: if(ms.mulitple){
    to: if(ms.multiple && String(ms.className).search(‘NoCBSwitch’) == -1){

    then, in your code, if you do select class=”NoCBSwitch” then it’ll not replace. Furthermore, if you already have a class for your select drop downs, just add that text to your class information: class=”NoCBSwitch NormalClassHere”

  35. WOW.. that works great.. along with Josh B mod.. and your mod Eli.. this is just awsome!

    Thanks so much…

  36. wow.. Kae.. your self approving of ones post is great!

  37. Eli.. you asked me to post a reminder for you LOL

    “With a bit of code modification, you could easily remove the checkbox from the checkbox list instead of limiting the interface… your choice. ”

    That would be totally great!

    THanks for any help Eli!

  38. Here is your reminder you asked for Eli! LOL

    “With a bit of code modification, you could easily remove the checkbox from the checkbox list instead of limiting the interface… your choice. ”

    Thanks and your mod works great!

  39. Hello,

    To start I would like to thanks the creator of the multiselect. It is very well done and very very helpfull.
    This message is for Josh B.
    Firstly I would like to say that your design of the multiselect on http://www.e-freehold.com/search.html is very very nice. Netherless I have a little problem with it.
    Indeed Inside my I have two that look very nice thanks to you. When I use IE and I submit the data I can retrieve the data in the next page. But when I use Firefox it is not working.
    Of course I tested your webpage and it works fine on both of the browsers.
    So do you have any clue.
    I am sure I did a mistake but I don’t know where.

    Regards,

    Fred

  40. Great work! But, I have come across an issue that is bugging me!

    I’ve noticed that the rendering is not correct when embedded within divs. I have this control under a [+] which expands and displays the list. The bad render can be seen here: http://egon.intranetics.co.uk/tmp1.JPG. However when I expand the [+] when the page is loading the list displays correctly as shown here: http://egon.intranetics.co.uk/tmp2.JPG

    I am using Firefox 1.0.7 on Win XP.
    Has anyone else come across this?
    Egon

  41. Egon, do you have a test page so I can see the problem in action?

    The multiselect gets its width and height from the select box it is replacing. Make sure that the select box is the correct size.

    Kae

  42. Fred, WordPress appears to be dropping anything with a left pointy bracket in it. Please put an example up somewhere and tell me the URL

  43. Hi Kae,
    Ok I’ve set up this demo here:
    http://egon.intranetics.co.uk/select_test.php

    If you are quick to open the div (+), you can see that the list renders correctly – you have to be quick! If you miss out it displays as tmp1.jpg as above and reders incorrectly. I could force it in the JS to be say 450 wide, but if there are other selects on the page they will then be all 450 wide which isn’t very practicle.

  44. Thank you for this really great script! I’d recently admired similar multiple selects at pricegrabber.com http://www.pricegrabber.com/search_attrib.php/page_id=5/form_keyword=video%20card/rd=1/adv=1. I figured my PHP skills too basic to implement anything similar. I’m partly puzzled by the processsing of the form though. Here’s the code which processes a form using several multiple=”multiple” option select fields:

    [CODE] 0 “;

    foreach ($_POST as $varname => $varvalue)

    {

    $_SESSION[$varname] = $varvalue;

    if ($_SESSION[$varname] != “” && $_SESSION[$varname] != “SUBMIT”)

    { // A field is selected

    if(is_array($_SESSION[$varname]))//check if select multiple was used i.e. $_SESSION[$varname] will be an array

    {

    if ($_SESSION[$varname][0] != ”)

    {$where .= ” AND $varname = ‘”.$_SESSION[$varname][0].”‘ “;}

    for ($i = 1; $i 0 AND TYPE = ‘COMMERCIAL’ OR TYPE = ‘UTILITY’ AND FOREMAN = ‘BM’ [/QUOTE]

    …it NEEDS to echo this instead to work properly (i.e. return the results one would expect from the form)

    [QUOTE] WHERE id > 0 AND TYPE = ‘COMMERCIAL’ AND FOREMAN = ‘BM’ OR TYPE = ‘UTILITY’ AND FOREMAN = ‘BM’ [/QUOTE] .

    On the form variable named TYPE[] , the values ‘COMMERCIAL’ and ‘UTILITY’ were selected, on the form variable named FOREMAN[] ‘BM’ was selected. I’m using the $_SESSION array to retain access to the $where string if needed later. $where is being used in a mysql query e.g. (SELECT * FROM $table $where)

    Any ideas are appreciated. Thanks again!!

  45. The code was not posted correctly in my earlier post. I will try to correct it and post again.

  46. Howdy Kae… um… not sure if you knew.. your rss feed does not work 🙁 any chance of getting that fixed ? 🙂

  47. I’ve been meaning to get around to that – many people have pointed it out to me. I’ll grab a CVS shot of WordPress and fix it immediately 🙂

  48. THis is a really nice  formated tex thing Kae.. but IE and Maxthon both have probs.. the box just disapears and this error is displayed in the javascript window: Line:12 Char:38124 Code:0 Error:Invalid source HTML for this operation. URL:http://verens.com/archives/2005/04/27/son-of-multiselect/ 

  49. OH!!! and thanks so much for fixing the RSS!!!!!!!   btw.. what text area are u using? and does it use iframes ?  is not.. where can i get it! LOL  

  50. Awesome work, just wanted to let you know about a couple things.  It works in Safari 1.31 and 2; only the top links don’t work and that is easily tested for.  If I get around to fixing it I will post the code.  Also in IE 6 win, you may want to add the height-4 like you have for the width as I was experiencing alignment issues and this fixed it.  Perfect in FF of course.

  51. This is great, however it looks kind of silly right aligned, shouldn’t this be left aligned? Has anyone attempted this?

  52. Hey, this looks great – it would help if you showed us the php code for your demo page. Thanks!

  53. Um, nevermind.. I thought there was some php code involved but now I get how it works. 🙂 Excellent job.

  54. Why not just use a checkbox group for all users? In plain old truly non-obtrusive HTML+CSS? I see no point in starting with a multiselect and then transforming it into a checkbox group.

  55. The multi-select is great. Can someone point me to an example of how you reference the form values on page called by this form? I have not used multiple forms before, and not sure if the script changes how the form fields need to be referenced.

  56. Nice script, but it doesn’t work with Opera 8.5…

  57. Correction: It works with Opera, but the “all”, “none”, “reset” buttons will not work…

  58. thanks SubData. fixed 🙂

    I also fixed a small bug where disabled options could be selected/unselected by selecting “all” or “none”.

  59. I get a PHP error when trying your demos:

    Warning: Invalid argument supplied for foreach() in /home/verens/public_html/demos/multiselect/multiselect.php on line 50

  60. Zeph, fixed.

    the second multiselect will not be read by the server, as it is written in Java format (no ‘[]’ at the end of its name). The third will not be read, as it is disabled. I’ve changed the appearance of disabled multiselects to indicate that they are disabled.

  61. Hi Kae,

    I’ve also written an alternative multi-select widgit. It’s based off an original script located on the Uzilla site and basically, breaks large selectLists into more usable on-screen chunks (grouping together the created checkbox/radio buttons that reside under the same optGroup and dynamically creating show/hide buttons for each group).

    A demo can be viewed at:

    http://www.frequency-decoder.com/demo/alternative-selectlist-widgit/

    Regards,
    Brian

  62. Found this website after making my own converter. The code looks different:

    function convertMultiSelect(){
    var aSelects = document.getElementsByTagName(‘select’);
    for (var i=0; i

  63. I’ve updated the multiselect.js file to allow IE6 to automatically select the checkbox when the label has been clicked. It will also preserve IDs.

    At line 70, insert:
    label.htmlFor=ms.id;
    if(label.htmlFor == “”)
    {label.htmlFor=ms.name + d.toString();}

    At line 86 (now 89), insert:
    checkbox.id=ms.id;
    if(checkbox.id == “”)
    {checkbox.id=ms.name + d.toString();}

  64. Terrific script. I have implemented on a test site and my test users love it. I’m using it for a custom database reporting app and have many long multi select elements. Scrolling up and down with the standard HTML was painful and one wrong click not holding the ctrl would reset the whole list!!!
    There is one suggestion I would like to make though.. how about a “highlight” option. So it’s easy to spot selected elements in the list. When checkbox is SELECTED, the row background would change color and then back again when de-selected.

  65. Scott, good idea.

    I’ve added that to the script. check it out.

  66. Very cool my friend…. but how about this….what about clicking the checkbox or the label to select or deselect?
    Thanks for the quick return.

  67. Nevermind… it helps to read what others write….. sorry, I now see that update from John two posts up from mine and have that working now also. Thanks everyone for the hard work. This script is sooo cool. Keep up the good work.

  68. I have another question for the javascript gurus here. On the form where I have this script implemented I need to force the user to make at least one selection from the list. When the form is submitted I run a javascript function that is suppose to check the elements marked as required to be sure they have a value. I’ve tried various scripts that I found on the web that is suppose to check SELECT MULTIPLE elements and I cannot seem to get them to work when this script is in place.
    Can anyone provide such a quick function that is known to work with this script?
    Thanks again.

  69. Hi Scott, I’ve added a new function to the code. it’s called “multiselect_hasSelected(name)”. it should return true if there is a selection, and false if not. I haven’t tested it, but it should work fine (it looks okay to me).

    I think it’s time I rewrote this… maybe I’ll do it tonight.

  70. This is a great script! It does wonders for cleaning up and simplifying information collection for me.

    Thanks for the time and effort. It’s very much appreciated.

  71. Thank you. Someday, I’ll get around to the rewrite I’ve promised, but it is good that this old code is still useful!

  72. Hi,
    Can you pls let me know how to get the values of the checkboxes selected?
    I can’t grab those in a java script function.
    Pls make an early reply.

  73. Nihar – it’s not really designed to be manipulated via JavaScript.

    Anyway – here is some code that might do it. I have not tested it, so it may have some small bugs.

    function getSelectedInputs(select_name){
    var inputs=[],selected_inputs=[],els=document.getElementsByTagName(‘input’),i;
    {
    for(i in els)if(els[i].name==select_name+'[]’)inputs[inputs.length]=els[i];
    for(i in inputs)if(inputs[i].checked)selected_inputs[selected_inputs.length]=i;
    return selected_inputs;
    }

    the above should return an array containing the indices of the selected inputs.

  74. does anyone knows how to implement buttons to move up and move down options?
    actually i’m using javascript code like this:
    http://www.mattkruse.com/javascript/selectbox/

    but i’d like to know if i can help to ‘son of multiselect’ can works with buttons to move options.
    thanks

  75. Hi! i was trying to use this with two listboxes with multiple selection but sincronized with ajax….not working for me….:(

  76. BioGooFun » Once upon a time …… BioGooFun ! - pingback on December 17, 2008 at 10:58 am
  77. klog » Blog Archive » inline multi-selects - pingback on April 3, 2009 at 8:29 am
  78. new irish plans (a construction industry thing) « klog - pingback on February 27, 2010 at 6:48 pm

Trackbacks and Pingbacks:

%d bloggers like this: