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

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

1 个答案: