Another new dynamic tool for websites or blogs has been added to the Arc90 Tools over to the lab. Check out MultiSelect, a sleek way to turn an HTML select into a stylish drop down that supports multiple selections in a compact view. It’s a drag and drop installation, and you can change any select into a nice little MultiSelect.
Monday, July 2nd, 2007
Ron said:
While it looks cool, I think this would be a very bad thing to use in real life. It doesn’t make it any easier for the average user to input data. You in fact make it harder for them to input data. It doesn’t seem to accept keyboard input, so people who don’t use a mouse will be left out. And visually impaired users may not be able to interact with it at all.
Joel Nagy said:
Ron, while your comments are accurate, I wouldn’t consider it a “very bad” thing. It just needs keyboard input to be added to it’s current capabilities. This tool is offered for free to all to use and modify, so please feel free to improve upon the existing code. You also have to agree that the need for holding down up to 3 keys at once to select multiple items in a drop down is just as difficult for some users. And there is a case for making sure that the visually impaired user can actual use the drop down. This case is not that big of a deal considering that newer screen readers are very capable of handling dynamically created HTML once it belongs to the screen or DOM.
steve said:
interesting…
It needs keyboard support (as mentioned), and it needs to be “tab-able”… if you start tabbing on the page, you can’t “get” to it.
still, pretty nice.
cheers
roryok said:
I like it. A lot.
Been looking for a good select replacement for a while now, and to have it also allow mulitple options… so cool.
I agree with the keyboard functionality comments above, but i also have one other suggestion.
Clicking outside the dropdown div should close it, just like in a regular select.
CH said:
Nice dropdown with multiple select. But this control still buggy.
#Bug 1 : If option value is test,test1,test2; when remove test, other value also will remove.
#Bug 2 : Sometime with get duplicate or invalid option value.
I hope someone can fix it.
Tina said:
I don’t suppose anyone has this in asp.net using vb.net? I know its unpopular but that’s what I’ve got to use.
Thanks
Alain said:
Bugs feedBack …
First of all, it didn’t work on my Apple Safari (2.0.4). Bug appears here : “to = toObj.value;” as no value and safari stop execution.
And now bug in multiselect, when you select certains value in list. Value returns not include select option value but select option text.
You can try on your demo page : select a bottom only iFrame and you will see when you submit that the value is i’F'rame not iframe
Regards and availiable to help you improve your script.
Mahmoud M. Abdel-Fattah said:
It’s useful too, but I’ve a strange problem !
when I submit(post) the data through IE7, it works fine.
but when I use FF2, it doesn’t post anything !!
Anonymous said:
Hi there!
This script is quite useful because it takes its values from HTML source. I have a little trouble while using the script. I have to use UTF-8 encoding but I couldn’t solve this problem. Did anyone have the same problem?
Denis G. said:
Sinan,
You can resolve it by adding :
header(‘Content-type: text/html; charset=UTF-8′);
in your script
;)
adi said:
How do I add onChange action on multiselect ?
For example:
adi said:
How do I add onChange action on multiselect ?
For example I want that at onChange to put an alert with the selected value. How can I do that ?
Ghena said:
Hi guys…
I found a little bug with IE6 and 7
if you inside the main Div far from the option text , you will find:
this.id is null or is not an object…
Could you help me to fix it ?
Best regards.
Cole said:
can it be open on default and have a scroll bar? i have a list of 80+ options which need to be selected
Javier said:
Cole,
Yes it definitely can. It should be as simple as adding an overflow auto and a fixed height. I’m not to familiar with the component’s CSS but you should be able to do this and have what you need:
.expcol-body {
overflow: auto;
height: 150px;
width: 200px;
}
Adjust the height and width to your tastes Cole and you are all set! Hope this helps.
Paolo said:
I found two bugs:
- when you click an element far from the option text, appears a Javascript error: “this.id” is null or is not an object.
- the image “multiselect.gif” is shown in an incorrect position: is before the end of the “select” element.
When you click on the Select the image shift to the correct position.
Paolo said:
…sorry, bugs mentioned in my previous post are related with using Internet Explorer 7! In Opera and Firefox is all ok!
lizzie said:
how to add onChange Event?
Asha said:
on reset, only the check box gets reset, but the text doesn’t reset and shows the current value
e.g: say original value; 2 value selected on thedrop down, text shows: 2 selected amd 2 check box selected
- un check one check box – text displays 1 selected
- now click on reset button on the form: shows 2 check box selected as original but the text still displays “1 selected” insted of 2 selected
How do i fix the reset issue on the text on the multiselect?
Josh said:
Has anyone been able to implement multiple select alls in the drop down itself? for example:
- select all fruits
- apple
- orange
- strawberry
- select all veggies
- celery
- lettuce
- carrot
thanks for your time. sweet script btw.
Jonathan said:
Hi,
I’m trying to use MultiSelect and am somewhat confused and disappointed by the new implementation (1.1). I used 1.0 b previously, and it worked really great with a few minor bugs, the rendering was fairly consistent across browsers and it looked great.
The newest version that I know of released Dec 08, seemed to me to be a much better implementation, easier to use and provided some new functionality which was exactly what I needed. But as I tried to use it, I just couldn’t get it to render properly and thought maybe it was just me not understanding how to use it. But when I looked at the sample provided, and the example on the website, I saw similar issues.
The only browser that rendered things as I expected was google chrome. In IE 7, the dropdown appears rendered ontop of a textbox and when you selected, stretches out to cover the text box. The drop down without multiple has radio buttons in IE 6/7. In Firefox, the drop down list appears disconnected.
I didn’t encounter these types of things in the previous release – what happened for this release? Is there another release expected to address these issues?
I think that this is a great piece of code, and I would really like to use it, but didn’t want to start hacking around if these issues were already known and being addressed. Are there any further developments/fixes planned?
Thanks,
Jonathan
sebastian said:
Great plugin, but it does not work in combination with fixed divs (emulation of frames with fixed divs), in such a case the multiselect sticks in the page like having fixed position.
sebastian said:
I finally made it work, both multiselect plugin and one of those common hacks to make fixed divs on IE6. Just in case anyone is dealing with this, I
Jackie said:
I need to be able to grey-out (disable) some of the checkboxes based on certain other events on the page. Is there a way to do this?
Thanks,
Jackie
Ron Sew said:
Great!! Thanks for this option, I am demonstrating your example (a bit changed) on my website now. Thanks Ron.
Dave said:
Unfortunately this system does not appear to play nice with PHP (perhaps because the name property needs to have array brackets, ie: “name=’myselectform[]‘ id=’myselectform’”). Has anybody been able to make this work? After a lot of testing – and finally just piecing together a regular multi-select form that worked all the way up to implementing this system – I’m at a loss on how to make it work with PHP :(
NIck said:
I have find a bug.
If i select a$.WhenToUse = ‘class’ or a$.WhenToUse = ‘multiple’ i have this problem.
If i have in my code
….
….
….
it’s all ok but if i have
….
….
….
the second select with class=”arc90_multiselect” don’t appear.
Do you say why?
Thanks and excuse for my english.
P.S. How can i add an event on onChange on my simple select( without class=”arc90_multiselect”)
Nick said:
I have find a bug.
If i select a$.WhenToUse = ‘class’ or a$.WhenToUse = ‘multiple’ i have this problem.
If i have in my code
select class=”arc90_multiselect
select class=”arc90_multiselect
select (simple select)
it’s all ok but if i have
select (simple select)
select class=”arc90_multiselect
select class=”arc90_multiselect
the second select with class=”arc90_multiselect” don’t appear.
Do you say why?
Thanks and excuse for my english.
P.S. How can i add an event on onChange on my simple select( without class=”arc90_multiselect”)
Robert said:
I found a bug when changing the default pipe value in a$.msSeparator = ‘|’;
If I change it, let’s say ‘, ‘ so I get a nice comma separated list with spaces, I get a comma at the beginning of the string. Same think happens if I use ‘ | ‘ to add some spaces around the pipe.
Looks like the JS does some cleaned but only related to the pipe. Would be nice for this to work on any character and spacing.
Tom said:
Lovely dropdown! I like it a lot, but have found a couple of bugs:
- The code requires a preceding sibling at the same DOM level — where a typically goes.
- Looks like an error is thrown is the select tag’s id attribute doesn’t match its name attribute exactly. I’m using Django, where the default state is for these to be slightly different.
I’m on a deadline and so will try to code around this, but if I find time to patch I’ll be sure to submit what I come up with.