的jQuery移动多个项目在列表框下

Question

我有有两个按钮来控制包含项的优先级列表框。当选择多个项目时，除了下移逻辑之外，一切正在工作。

如果选择了两个项目，没有任何反应，而如果三个或更多的选择，只有底部一个移动..有一个简单的方法来处理这个使用jQuery？

当前实现：

<div id="selected"> 
    <div><strong>Selected</strong></div> 
    <div id="selected-items"> 
     <input type="select" multiple="multiple" id="selected-items-select"> 
      <option/> 
     </input> 
    </div> 
</div> 

<div id="priority" style="display: none;"> 
    <div><input type="button" id="move-up" value="^" /></div> 
    <div><input type="button" id="move-down" value="v" /></div> 
</div> 

<script type="text/javascript"> 

    $(document).ready(function() { 
     $('#move-up').click(moveUp); 
     $('#move-down').click(moveDown); 
    }); 

    function moveUp() { 
     $('#selected-items select :selected').each(function (i, selected) { 
      $(this).insertBefore($(this).prev()); 
     }); 
     $('#selected-items select').focus().blur(); 
    } 

    function moveDown() { 
     $('#selected-items select :selected').each(function (i, selected) { 
      $(this).insertAfter($(this).next()); 
     }); 
     $('#selected-items select').focus().blur(); 
    } 
</script> 

另外，还要注意的$('#selected-items select').focus().blur();线..我有它，因为有时候优先级不更新，直到列表框获得焦点。有没有更好的方法来做到这一点？

Answer 1

当您尝试向下移动多个项目，你通过他们循环，以便从顶部到底部。不幸的是，这意味着你移动第二选择的项目后选择的第一项，然后第二个选项的第一个后，导致没有变化。

我用的伎俩，通过选择向下移动时，解决了这个问题，从here循环倒退。

更新：增加了一个测试，看看你动了你的选择，以顶部或底部，避免诉诸选择：http://jsfiddle.net/FBTVk/1/

function moveUp() { 
    $('#selected-items select :selected').each(function(i, selected) { 
     if (!$(this).prev().length) return false; 
     $(this).insertBefore($(this).prev()); 
    }); 
    $('#selected-items select').focus().blur(); 
} 

function moveDown() { 
    $($('#selected-items select :selected').get().reverse()).each(function(i, selected) { 
     if (!$(this).next().length) return false; 
     $(this).insertAfter($(this).next()); 
    }); 
    $('#selected-items select').focus().blur(); 
}