0

顧客の仕様に従って、HTMLの<複数選択>をjavascriptでハッキングしました。

  • アイテムをクリックすると、そのアイテムの選択されたステータスのみが切り替わります。
  • 他の選択されたアイテムは選択されたままになります。

少しの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();'>

選択した倍数のIDは0、1、2などです。他のIDを指定する場合は、コードを少し変更する必要があります。

4

1 に答える 1

0

表示されるちらつきは、選択したオプションを変更してから再描画することによるものです。残念ながら、これはほとんどのブラウザで回避できるとは思いません。

Chromeではonmousedown、選択にバインドして使用preventDefaultし、イベントをそれとは逆に設定できます。targetselected

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をサポートしますが、要素ではselectなくをe.target返します。FireFoxはselectのpreventDefaultをサポートしていないようです（少なくとも、動作させることはできません）。selectoption

于 2013-02-22T20:56:52.713 に答える