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

当您尝试向下移动多个项目时,您将按从上到下的顺序循环遍历它们.不幸的是,这意味着您在第二个选定项目之后移动第一个选定项目,然后在第一个选定项目之后移动第二个选定项目,导致没有变化.

我通过使用此处的技巧在向下移动时向后循环选择来解决问题.

更新:添加了一个测试,看看你是否已将选择移到顶部或底部以避免选择: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();
}