- ベストアンサー
option要素の移動が遅い
- SELECTボックスのoption要素を移動させるスクリプトの処理が遅くなっており、問題が発生しています。
- 特に、ボックス内に1万件以上のデータがあり、その中から1000件以上のデータを移動させる場合に遅さが顕著になります。
- 重複チェックのために移動先のリストを順番に確認しているため、処理が重くなっている可能性があります。より高速な処理方法を探しています。
- ginfix
- お礼率34% (330/968)
- JavaScript
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
助言をいただきました。（HTML(5)なら) （関数Cは必要ないよ。） う～～～ん、プチほれぼれする。 function moveSelectedOption (a, b) { Array.prototype.push.apply(b.options, Array.prototype.slice.call (a.querySelectorAll ('option:checked'), 0) .filter (B, Array.prototype.reduce.call (b.options, A, {}))); } document はグローバルなので…。
その他の回答 (3)
- babu_baboo
- ベストアンサー率51% (268/525)
蛇足。 ３００ミリ秒に１００個づつ追加しているので、見た目（だけ）が早いかも？ function moveSelectedOption (a, b) { var tm = 300;//ms var ct = 100;//n var op = Array.prototype.slice.call (a.querySelectorAll ('option:checked'), 0) .filter (B, Array.prototype.reduce.call (b.options, A, {})) var len = op.length; var i = 0; function LOOP () { for (var o, cnt = ct; cnt--; i++) if (o = op[i]) b.appendChild (o); else break; if (i < len) setTimeout (LOOP, tm); }; LOOP (); }
- babu_baboo
- ベストアンサー率51% (268/525)
option.value が無い場合など考慮してません。 <!DOCTYPE html> <meta charset="utf-8"> <title></title> <body> <form action="#" onsubmit="check(event)"> <select id="a" multiple> <option value="a1">移動されない</option> <option value="b2">サンプル2</option> <option value="c3">サンプル3</option> </select> <select id="b" multiple> <option value="a1">サンプル1</option> <option value="a2">サンプル2</option> <option value="a3">サンプル3</option> </select> <input type="submit" value="test"> <script> function A (a, op) { a[op.value] = op.text; return a; } function B (op) { return ! this.hasOwnProperty (op.value); } function C (op) { this.appendChild (op); } function moveSelectedOption (a, b) { Array.prototype.slice.call (a.querySelectorAll ('option:checked'), 0) .filter (B, Array.prototype.reduce.call (b.options, A, {})) .forEach (C, b); } function check (e) { var d = document; moveSelectedOption (d.querySelector('#a'), d.querySelector('#b')); return e.preventDefault(); } </script>
- babu_baboo
- ベストアンサー率51% (268/525)
>もっと処理を早くする方法 jQuery を使う時点で、どうかと思うけど $("#" + from + " option:selected") これは、変数に代入して活用すべき。（三回も呼び出している） それを行ったとしても早くなりそうにないけれど
お礼
ありがとうございます！ 参考にさせていただいております。 後出しで申し訳ないのですが、サブミットを発動させたくないので、ボタンのオンクリックに仕込んでみました。 しかし、var d = document;でうまいことHTMLオブジェクトが取れないようです（ローカルだと上手くいくけど、サーバに持ってくとダメなので、サーバの設定の問題…？）。 ちょっと悩んでみます…。