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, resetlinks may be turned off by changing theshow_toplinksvariable in the source tofalse. - 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 asdisabled.
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.
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 Â
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.
This is great, however it looks kind of silly right aligned, shouldn’t this be left aligned? Has anyone attempted this?
Hey, this looks great – it would help if you showed us the php code for your demo page. Thanks!
Um, nevermind.. I thought there was some php code involved but now I get how it works.
Excellent job.
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.
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.
Nice script, but it doesn’t work with Opera 8.5…
Correction: It works with Opera, but the “all”, “none”, “reset” buttons will not work…
thanks SubData. fixed
I also fixed a small bug where disabled options could be selected/unselected by selecting “all” or “none”.
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
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.
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
Found this website after making my own converter. The code looks different:
function convertMultiSelect(){
var aSelects = document.getElementsByTagName(’select’);
for (var i=0; i
Bleh, I can’t post it here.
Link to forumpost: http://gathering.tweakers.net/forum/list_messages/1136367
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();}
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.
Scott, good idea.
I’ve added that to the script. check it out.
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.
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.
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.
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.
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.
Thank you. Someday, I’ll get around to the rewrite I’ve promised, but it is good that this old code is still useful!
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.
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.
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
Hi! i was trying to use this with two listboxes with multiple selection but sincronized with ajax….not working for me….:(
[...] great instance was when I found out this great webpage that helped me to create a nice multi select box for a biological database interface that needed to [...]
[...] I was impressed with myself to see that I might have helped influence it, as my own multi-select widget from 4 years back is [...]