I've been looking for a multi-selection select that works in any IE-version (yeah), that also doesn't render new elements which mimic a select.
Most of the solutions I've found on SO didn't work in IE duo the fact that IE allways acts as if you target the SELECT-element and not the OPTION-element. Even e.target on window will say it targets the SELECT-element.
I've tried work-arounds on several solutions but didn't manage to find one that works in all browsers:
How to avoid the need for ctrl-click in a multi-select box using Javascript?
So I made my own solution which isn't perfect. But it does work. I will list some issues and my questions further down
This is my example: JS-FIDDLE
// Array which holds selected categories
var selected = $("select.multiSelect").val() || [];
$(".multiSelect").bind("click", function(e) {
// If found in array, remove it, else add it.
var found = $.inArray(this.value, selected);
if (found >= 0) {
var index = selected.indexOf(e.target.value);
selected.splice(index, 1);
} else {
selected.push(this.value);
}
// Update the visual of the select
$(".multiSelect").val(selected);
});
1. The main question: If I already have a few categories selected and try to select another one. The whole selection blinks, which is annoying. Can this be avoided with css or js?
I tried the solution in IE, Chrome iPhone (works nativly) and an Android (works nativly). Can someone predict a plattform or case where it won't work?
Is there a better way of doing this?
