如何修復我的jQuery方法，以便我可以重新排序多選選項控件中的項目？

Question

我有一個多選選項選擇和上/下按鈕：

<select id="animalSelector" multiple="multiple"> 
    <option>Elephant</option> 
    <option>Duck</option> 
    <option>Dog</option> 
    <option>Giraffe</option> 
    <option>Dinosaur</option> 
    <option>Whale</option> 
</select> 

<input type="button" id="btnMoveUp" value="^ Up" /> 
<input type="button" id="btnMoveDown" value="v Down" /> 

我希望用戶能夠突出/選擇多個選項（使用Ctrl鍵），然後就可以拉昇他們的選擇和下。

我也試着它：

$('#btnMoveUp').click(function (e) { 
     moveUp(); 
     e.preventDefault(); 
    }); 

    $('#btnMoveDown').click(function (e) { 
     moveDown(); 
     e.preventDefault(); 
    }); 

    function moveUp() { 
     var allOptions = $('#animalSelector').find('option'); 
     allOptions.filter(':selected').each(function() { 
      var newPosition = allOptions.index(this) - 1; 
      if (newPosition > -1) { 
       allOptions.eq(newPosition).before(this); 
      } 
     }); 
    } 

    function moveDown() { 
     var allOptions = $('#animalSelector').find('option'); 
     var count = allOptions.length; 
     allOptions.filter(':selected').each(function() { 
      var newPosition = allOptions.index(this) + 1; 
      if (newPosition < count) { 
       allOptions.eq(newPosition).after(this); 
      } 
     }); 
    } 

然而，這似乎行事IE7非常慢/古怪的，它有一些怪異的行爲時，選擇開始達到頂峯。

有沒有人有任何建議，我可以處理multiselect上移/下移行爲的最佳方式？

Answer 1

function moveUp() { 
    var select= $('#animalSelector')[0]; 
    for (var i= 1, n= select.options.length; i<n; i++) 
     if (select.options[i].selected && !select.options[i-1].selected) 
      select.insertBefore(select.options[i], select.options[i-1]); 
} 

function moveDown() { 
    var select= $('#animalSelector')[0]; 
    for (var i= select.options.length-1; i-->0;) 
     if (select.options[i].selected && !select.options[i+1].selected) 
      select.insertBefore(select.options[i+1], select.options[i]); 
}