InsertAfter選擇與多項屬性不滾動項目到視圖

Question

我有一個選擇元素具有多個屬性。我使用javascript在列表中上下移動項目。

HTML：

<select id="sel" size="10" multiple> 
    <option>1</option> 
    <option>2</option> 
    ... 
    <option>14</option> 
</select> 
<span id="moveDown">Move Down</span> 

而下面的javascript：

$("#moveDown").button().click(function() { 
    var select = $("#sel"); 
    var selItem = $("#sel option:selected") 
    var next = selItem.last().next(); 
    selItem.insertAfter(next); 
}); 

我的問題是，在Chrome和IE，如果所選擇的項目被滾出視圖，選擇列表中不滾動以保持項目在視圖中。 Firefox始終保留最上面的選定項目。

如果我刪除多個屬性，然後一切都按預期工作，但我需要能夠選擇多個項目爲此列表的其他功能。

我的問題是，我如何滾動到選定的項目？我一直在使用位置試過，偏移和高度，但他們在選擇所有0鉻：

console.log(selItem.position().top); 
console.log(selItem.offset().top); 
console.log(selItem.height()); 

下面是一個說明問題的一個小提琴：http://jsfiddle.net/ywypB/4/

Answer 1

很奇怪！好的一種方法是使用.scrollTop()。

爲什麼不嘗試這樣的事情（我知道不理想，但一個可能的解決方案）：

$("#moveDown").button().click(function() { 
    var select = $("#sel"); 
    var selItem = $("#sel option:selected"); 
    var next = selItem.last().next(); 
    var index = selItem.insertAfter(next).index() + 1; 
    if(index > $('#sel').attr('size')){ 
     $('#sel').scrollTop(17 * parseInt(index - $('#sel').attr('size'))); //17 is height of option 
    } 
}); 

DEMO： http://jsfiddle.net/dirtyd77/ywypB/16/