Kae Verens

son of multiselect

by kae verens on Apr.27, 2005, under javascript, web development

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.


76 Comments for this entry

  • David
    November 30th, 2005 on 3:18 am

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

  • rob
    January 27th, 2006 on 4:33 pm

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

  • rob
    January 27th, 2006 on 4:43 pm

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

  • Brian
    April 17th, 2006 on 2:29 pm

    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.

  • Cathy
    April 20th, 2006 on 6:46 pm

    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.

  • SubData
    May 10th, 2006 on 10:16 am

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

  • SubData
    May 10th, 2006 on 10:17 am

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

  • Kae Verens
    May 10th, 2006 on 10:29 am

    thanks SubData. fixed :-)

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

  • Zeph
    May 11th, 2006 on 1:24 am

    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

  • Kae Verens
    May 11th, 2006 on 8:25 am

    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.

  • frequency decoder
    May 15th, 2006 on 11:25 am

    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

  • Vincent
    May 27th, 2006 on 10:34 pm

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

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

  • John Medema
    June 9th, 2006 on 9:40 pm

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

  • Scott
    June 19th, 2006 on 2:53 pm

    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.

  • Kae Verens
    June 19th, 2006 on 3:44 pm

    Scott, good idea.

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

  • Scott
    June 19th, 2006 on 5:55 pm

    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.

  • Scott
    June 19th, 2006 on 8:01 pm

    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.

  • Scott
    June 21st, 2006 on 3:13 pm

    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.

  • kae
    June 21st, 2006 on 3:22 pm

    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.

  • Gary
    July 13th, 2006 on 3:20 am

    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.

  • Kae Verens
    July 13th, 2006 on 8:44 am

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

  • Nihar
    August 16th, 2006 on 1:49 pm

    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.

  • Kae Verens
    August 16th, 2006 on 2:47 pm

    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.

  • onlyafriend
    May 2nd, 2007 on 2:29 pm

    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

  • Rossa
    July 25th, 2007 on 11:40 pm

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

« Older Comments

5 Trackbacks / Pingbacks for this entry

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Blogroll

A few highly recommended websites...

Archives

All entries, chronologically...