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中非常缓慢/古怪，当选择开始到达顶部时它有一些奇怪的行为。

有没有人对我可以处理多选上移/下移行为的最佳方法有任何建议？

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

如何修复我的jQuery方法，以便我可以在多选项控件中重新排序项目？

1 个答案: