1

コードに論理エラーがあります.一度に 2 つ以上のオプションを上下に移動することはできません.一度に 1 つのオプションのみを上下に移動できます..2 つ以上のオプションを上下に移動させる方法選ばれると…

function listbox_move(listID, direction) {
    var listbox = document.getElementById(listID);
    var selIndex = listbox.selectedIndex;

    if(-1 == selIndex) {
        alert("Please select an option to move.");
        return;
    }

    var increment = -1;
    if(direction == 'up')
        increment = -1;
    else
        increment = 1;

    if((selIndex + increment) < 0 ||
        (selIndex + increment) > (listbox.options.length-1)) {
        return;
    }

    var selValue = listbox.options[selIndex].value;
    var selText = listbox.options[selIndex].text;
    listbox.options[selIndex].value = listbox.options[selIndex + increment].value
    listbox.options[selIndex].text = listbox.options[selIndex + increment].text

    listbox.options[selIndex + increment].value = selValue;
    listbox.options[selIndex + increment].text = selText;

    listbox.selectedIndex = selIndex + increment;

}

そして、私はそれを次のように呼びます

listbox_move('countryList', 'up'); //move up the selected option
listbox_move('countryList', 'down'); //move down the selected option

前もって感謝します.... ：）

4

4 に答える 4

1

私はそのかなり古い質問を知っています...それが役に立ったら..

編集 ：

https://jsfiddle.net/m0f757w/

<html>
<body>
<script language="javascript" type="text/javascript">
        function moveUp()
        {
            var ddl = document.getElementById('contentlist');
            //var size = ddl.length;
            //var index = ddl.selectedIndex;
            var selectedItems = new Array();
            var temp = {innerHTML:null, value:null};
            for(var i = 0; i < ddl.length; i++)
                if(ddl.options[i].selected)             
                    selectedItems.push(i);

            if(selectedItems.length > 0)    
                if(selectedItems[0] != 0)
                    for(var i = 0; i < selectedItems.length; i++)
                    {
                        temp.innerHTML = ddl.options[selectedItems[i]].innerHTML;
                        temp.value = ddl.options[selectedItems[i]].value;
                        ddl.options[selectedItems[i]].innerHTML = ddl.options[selectedItems[i] - 1].innerHTML;
                        ddl.options[selectedItems[i]].value = ddl.options[selectedItems[i] - 1].value;
                        ddl.options[selectedItems[i] - 1].innerHTML = temp.innerHTML; 
                        ddl.options[selectedItems[i] - 1].value = temp.value; 
                        ddl.options[selectedItems[i] - 1].selected = true;
                        ddl.options[selectedItems[i]].selected = false;
                    }
        }

        function moveDown()
        {
            var ddl = document.getElementById('contentlist');
            //var size = ddl.length;
            //var index = ddl.selectedIndex;
            var selectedItems = new Array();
            var temp = {innerHTML:null, value:null};
            for(var i = 0; i < ddl.length; i++)
                if(ddl.options[i].selected)             
                    selectedItems.push(i);

            if(selectedItems.length > 0)    
                if(selectedItems[selectedItems.length - 1] != ddl.length - 1)
                    for(var i = selectedItems.length - 1; i >= 0; i--)
                    {
                        temp.innerHTML = ddl.options[selectedItems[i]].innerHTML;
                        temp.value = ddl.options[selectedItems[i]].value;
                        ddl.options[selectedItems[i]].innerHTML = ddl.options[selectedItems[i] + 1].innerHTML;
                        ddl.options[selectedItems[i]].value = ddl.options[selectedItems[i] + 1].value;
                        ddl.options[selectedItems[i] + 1].innerHTML = temp.innerHTML; 
                        ddl.options[selectedItems[i] + 1].value = temp.value; 
                        ddl.options[selectedItems[i] + 1].selected = true;
                        ddl.options[selectedItems[i]].selected = false;
                    }
        }
</script>
<select id="contentlist" name="itemId" multiple="multiple">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<button id="Up" onclick="moveUp()">Up</button>
<button id="Down" onclick="moveDown()">Down</button>
</body>
</html>
于 2014-03-12T05:34:50.543 に答える
0

dave823の回答には問題がありますが、コメントすることはできないため、私の実用的な解決策があります:

アイテムを上下に移動する場合、同じ「for」ループを（使用したのと同じように）使用できません。ケースごとに2つの異なるループを使用する必要があります-次のようなものです:

for(var i=0; i<listbox.options.length; i++)
for(var i = listbox.options.length - 1; i >= 0; i--)

dave823の回答に基づく私の（実用的な）ソリューションは次のとおりです。

function listbox_move(listBox, direction) {
    if (direction == 'up') {
        for (var i = 0; i < listBox.options.length; i++) {
            moveLbSelectedItemUpDown(lbOutput, i, -1);
        }
    }
    else if (direction == 'down') {
        for (var i = listBox.options.length - 1; i >= 0; i--) {
            moveLbSelectedItemUpDown(lbOutput, i, 1);
        }
    }
}

function moveLbSelectedItemUpDown(lb, itemIndex, increment) {
    if (-1 == itemIndex) {
        alert("Please select an option to move.");
        return;
    }
    if (lb.options[itemIndex].selected == true) {
        if ((itemIndex + increment) < 0 ||
            (itemIndex + increment) > (lb.options.length - 1)) {
            return;
        }
        var selValue = lb.options[itemIndex].value;
        var selText = lb.options[itemIndex].text;
        lb.options[itemIndex].value = lb.options[itemIndex + increment].value
        lb.options[itemIndex].text = lb.options[itemIndex + increment].text
        lb.options[itemIndex].selected = false;
        lb.options[itemIndex + increment].value = selValue;
        lb.options[itemIndex + increment].text = selText;
        lb.options[itemIndex + increment].selected = true;
    }
}
于 2014-01-22T11:19:33.263 に答える
0

すべてのオプションをループして、どのオプションが選択されているかをテストし、同じロジックを実行する必要があります。これを行う方法の実際の例を次に示します-これを使用できるはずです:

function listbox_move(listID, direction)
{
    var listbox = document.getElementById(listID);

    for(var i=0; i<listbox.options.length; i++)
    {
        var option = listbox.options[i];
        if(option.selected == true)
        {
            var selIndex = i;

            if(-1 == selIndex) {
                alert("Please select an option to move.");
                return;
            }

            var increment = -1;
            if(direction == 'up')
                increment = -1;
            else
                increment = 1;

            if((selIndex + increment) < 0 ||
                (selIndex + increment) > (listbox.options.length-1)) {
                return;
            }
            var selValue = listbox.options[selIndex].value;
            var selText = listbox.options[selIndex].text;
            listbox.options[selIndex].value = listbox.options[selIndex + increment].value
            listbox.options[selIndex].text = listbox.options[selIndex + increment].text
            listbox.options[selIndex].selected = false;
            listbox.options[selIndex + increment].value = selValue;
            listbox.options[selIndex + increment].text = selText;
            listbox.options[selIndex + increment].selected = true;
        }
    }
}
于 2013-02-20T14:27:36.180 に答える