少しは速いかな？

JavaScript

option要素の移動が遅い
http://oshiete.goo.ne.jp/qa/8441116.html

ちょっと端折りすぎた感。

<!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">
</form>

<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>

時間差で追加していく

でも、SELECT要素がフォーカスされている時に追加されたらどうなるん？
きっとそれは実装依存だろうな。

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 ();
}