Question

代码中存在逻辑错误。我们不能一次向上或向下移动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

提前谢谢.... :)

Answer 1

我知道它很老的问题......如果它有帮助..

编辑：

https://jsfiddle.net/m0f757wh/

<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>

Answer 2

您需要遍历所有选项并测试选择哪些选项并执行相同的逻辑。这是一个如何操作的工作示例 - 您应该能够使用它：

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

Answer 3

dave823的答案存在问题，但我无法发表评论，因此有我的工作解决方案：

如果向上和向下移动项目，则不能使用相同的“for”循环（如您使用的那样）。你必须为每个案例使用两个不同的循环 - 如下所示：

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

Answer 4

这是StackAddict的代码，其中包含一些重要的修订，以确保将Text 和 Value属性交换在一起：

       $("#up").bind("click", function () {
            var ddl = $("[id*=lstRight]")[0]; // <-- you may not need the [0]... I needed it
            var selectedItems = new Array();
            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++) {
                        var tempText = ddl.options[selectedItems[i]].text;
                        var tempValue = ddl.options[selectedItems[i]].value;
                        ddl.options[selectedItems[i]].text = ddl.options[selectedItems[i] - 1].text;
                        ddl.options[selectedItems[i]].value = ddl.options[selectedItems[i] - 1].value;
                        ddl.options[selectedItems[i] - 1].text = tempText;
                        ddl.options[selectedItems[i] - 1].value = tempValue;
                        ddl.options[selectedItems[i] - 1].selected = true;
                        ddl.options[selectedItems[i]].selected = false;
                    }
        });

        $("#down").bind("click", function () {
            var ddl = $("[id*=lstRight]")[0]; // <-- you may not need the [0]... I needed it
            var selectedItems = new Array();
            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--)
                    {
                        var tempText = ddl.options[selectedItems[i]].text;
                        var tempValue = ddl.options[selectedItems[i]].value;
                        ddl.options[selectedItems[i]].text = ddl.options[selectedItems[i] + 1].text;
                        ddl.options[selectedItems[i]].value = ddl.options[selectedItems[i] + 1].value;
                        ddl.options[selectedItems[i] + 1].text = tempText; 
                        ddl.options[selectedItems[i] + 1].value = tempValue; 
                        ddl.options[selectedItems[i] + 1].selected = true;
                        ddl.options[selectedItems[i]].selected = false;
                    }           
        });

在多个选择框中上下移动选项

4 个答案: