0

根据我客户的规范，我已经用 javascript 破解了 html 的 <select multiple>：

  • 单击一个项目只会切换该项目的选定状态。
  • 其他选定的项目保持选中状态。

一点点 javascript 会记住所有选定的值。当用户点击时，只会选择他点击的选项。javascript 选择他记得的选项。

但是，它会导致闪烁效果。我怀疑是否有任何解决方案，但我觉得我不得不问一下，以防万一，有没有人知道延迟渲染的方法，或者任何其他解决方案来完成这个，没有闪烁？

此致。

编辑：这是代码

var choices=new Array();
function prepmulti(){
    var m=document.querySelectorAll('select');
    for(var i=0;i<m.length;i++)
        if(m[i].id!=''){
            m[i].onclick=toggle;
            choices.push(new Array());
        }
}
function toggle(){
    var sel, x;
    for(var i=0; i<this.options.length;i++)
        if(this.options[i].selected){
            sel=i;
            break;
        }
    if((x=choices[this.id].indexOf(sel))<0)
        choices[this.id].push(sel);
    else{
        choices[this.id].splice(x, 1);
        this.options[sel].selected=false;
        }
    for(i=0;i<choices[this.id].length;i++)
            this.options[choices[this.id][i]].selected=true;
}

<body onload='prepmulti();'>

选择的倍数有 ids 0、1、2 等...如果你给他们其他 id，代码必须稍微修改一下。

4

1 回答 1

0

您看到的闪烁来自它更改选定的选项然后重新绘制 - 不幸的是，我认为这在大多数浏览器中是无法避免的。

在 Chrome 中，您可以绑定onmousedown选择、使用preventDefault，然后将 event 设置为与其相反target的selected内容。

var m=document.querySelectorAll('select');
for(var i=0;i<m.length;i++)
{
    m[i].onmousedown = function(e) {
        e.preventDefault();
        e.target.selected = !e.target.selected;
    };
}

http://jsfiddle.net/VDnQK/

不过，这只适用于 Chrome。IE 支持 preventDefault forselect但e.target返回select而不是option元素。FireFox 似乎不支持用于 select 的 preventDefault （至少，我无法让它工作）。

于 2013-02-22T20:56:52.713 回答