Javascript 在选定多个选项的情况下对选定元素进行排序会颠倒顺序

我有一个select元素，其中有一长串人。我希望能够在列表中选择多个人，并通过单击箭头对他们进行上下排序。我想我已经成功了，但每次我向上移动一个选项时，所选的选项都会按顺序倒转

这就像第二个选中的选项向上移动，也超过了第一个…不知道发生了什么。提前谢谢

var select = _select;
var optionsNodeList = select.options;
var options = [];
var selectedIndexes = [];

for (var i = 0; i < optionsNodeList.length; i++) {
    var option = optionsNodeList.item(i);
    options.push(option);
    if (option.selected) {
        selectedIndexes.push(i);
    }
}

var len = selectedIndexes.length;
var firstSelected = selectedIndexes[0];
var lastSelected = selectedIndexes[len-1];
if (isSortUp === true && firstSelected !== 0) {
    for (var i = 0, currIndex; i < len; i++) {
        var currIndex = selectedIndexes[i];
        insertBefore(options[currIndex], options[currIndex-1]);             
    }
} else if (isSortUp === false && lastSelected !== options.length-1) {
    for (var i = len-1, currIndex; i > -1; i--) {
        var currIndex = selectedIndexes[i];
        insertAfter(options[currIndex], options[currIndex+1]);
    }
}

function insertBefore(newNode, refNode) {
    refNode.parentNode.insertBefore(newNode, refNode);
}
function insertAfter(newNode, refNode) {
    refNode.parentNode.insertBefore(newNode, refNode.nextSibling);
}

var-select=\u-select；
var options nodelist=select.options；
var期权=[]；
var selectedIndex=[]；
对于（变量i=0；i-1；i--）{
var CurrendIndex=选择的指数[i]；
插入后面（选项[currIndex]，选项[currIndex+1]）；
}
}
函数insertBefore（newNode、refNode）{
refNode.parentNode.insertBefore（newNode，refNode）；
}
函数insertAfter（newNode、refNode）{
refNode.parentNode.insertBefore（newNode，refNode.nextSibling）；
}

按下向上箭头之前： 按下向上箭头后：

---

您的错误是您将选项放在前一个选项之前，因此第二个选项“insertBefore”将放在第一个选项之前

例如： 选项1-索引0 选项2（选定）-索引1 选项3（选定）-索引2

第一个选择的插入在索引0之前这没问题，第二个选择的插入在索引1之前，所以它位于索引1的顶部，不好

你可以这样做来解决你的问题

if (isSortUp === true && firstSelected !== 0) {
    for (var i = 0, currIndex; i < len; i++) {
        var currIndex = selectedIndexes[i];
        if(i == 0){
          insertBefore(options[currIndex], options[currIndex-1]);             
        }else{
          insertAfter(options[currIndex], options[currIndex-1]); 
        }
    }
} 

if（isSortUp==true&&firstSelected！==0）{
对于（var i=0，currendex；i

---

由于第一个选定的插入在前一个插入之前，其余选定的插入将放置在第一个选定的插入之后。

根本不需要循环。不要移动整个组，只需将选项移动到之前（或之后）：

但是，为了完整性起见，交换顺序的原因是您正在对循环中DOM中的元素重新排序，但您没有对您拥有的数组

options

重新排序。您用于存储选项的额外数组不是必需的。如果您将代码更改为直接使用

select.options

，则您的代码实际上将与您编写的代码一样工作，而无需在每次单击时对所选选项重新排序

document.getElementById（“up”）.addEventListener（“单击”，函数）（）{
移动（真）；
});
document.getElementById（“向下”）.addEventListener（“单击”，函数）（）{
移动（假）；
});
功能移动（isSortUp）{
var select=document.getElementById（“sel”）；
var options nodelist=select.options；
var期权=[]；
var selectedIndex=[]；
对于（变量i=0；i

A.
B
C
D
E
F
G
H
我
J
向上的
向下

如果，你的

中不应该有“var”。是的，var不应该在那里，一个输入错误，为什么循环？仅将一个元素前后移动到选定组的前面或后面似乎更容易。然后它只是一个移动的元素，而不是移动整个选定列表。谢谢！现在移动未选中的元素似乎很明显，因为您已经说出了它。当然，我注意到，当移动大约一百个选定的项目时，响应速度要快得多。还感谢您指出我在选项数组中的错误。干杯
if (isSortUp === true && firstSelected !== 0) {
    insertAfter(options[firstSelected - 1], options[lastSelected]);
} else if (isSortUp === false && lastSelected !== options.length-1) {
    insertBefore(options[lastSelected + 1], options[firstSelected]);
}