0

複数選択オプション セレクターとアップ/ダウン ボタンがあります。

<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 では非常に遅く/奇妙に動作するようであり、選択が一番上に到達し始めると奇妙な動作が発生します。

複数選択の移動/移動動作を処理できる最善の方法について誰か提案がありますか?

4

1 に答える 1

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]);
}
于 2010-11-12T21:14:36.407 に答える