当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - A proper multi selection -select, that works in IE and crossplattforms

问题描述:

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?

  1. 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?

  2. Is there a better way of doing this?

分享给朋友:
您可能感兴趣的文章:
随机阅读: