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

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