尝试使用选择标签和Onchange自定义排序列表

我是Javascript和函数的新手…我已经尽我所能了，但我是死路一条。我想做的是允许用户使用下拉框手动更改数据集的排序顺序。例如，使用以下数据:

Name    SortOrder
Bob     1
John    2
Mary    3
Susan   4
Frank   5
Allison 6
Katie   7
Scott   8

假设用户想要将John显示在列表的顶部，而Susan显示在列表的第二位。当用户将John的SortOrder更改为1时，我希望Bob的SortOrder更改为2。当Susan的值变为2时，我希望Bob的值变为3,Mary的值变为4。我所以接近这一点，但是一旦做了一两个更改，列表就不配合了。下面是我的函数:

<script>
function changeField(newval, oldval, maxfield, fieldid) {
var val = newval.value;
var oldval = Number(oldval);
var maxfield = Number(maxfield);
for (var i = 1; i <= maxfield; i++) {
    var curval = Number(document.getElementById("sortorder" + i).value);
    if (val < oldval) {
        if (curval >= val && curval < oldval && fieldid != "sortorder" + i) {
            document.getElementById("sortorder" + i).value = curval + 1;
            }
        }
    if (val > oldval) {
        if (curval <= val && curval > oldval && fieldid != "sortorder" + i) {
            document.getElementById("sortorder" + i).value = curval - 1;
            }
        }
    }
for (var n = 1; n <= maxfield; n++) {
    var newfieldid= "sortorder" + document.getElementById("sortorder" + n).value;
    document.getElementById("sortorder" + n).id = newfieldid;
    }
}
</script>

这里是选择框:

echo '<select id="sortorder' . $crow['catSortOrder'] . '" onchange="changeField(this, ' . $crow['catSortOrder'] . ', ' . $numcat . ', ''sortorder' . $crow['catSortOrder'] . ''');">';
for ($v=1; $v<=$numcat; $v++) {
echo '<option id="optid" value=' . $v . ($v == $crow['catSortOrder'] ? " selected = '"yes'"" : "") . '>' . $v . '</option>';
}
echo '</select>';

$crow['catSortOrder']引入SortOrder字段的值(Bob = 1, John = 2，等等)。$numcat是列表中的行数(在我的示例中为4)。因此，我在函数调用中传递的是新值(在字段更改后)，旧值，最大数量和选择字段id (sortorder1, sortorder2等)。

函数的目的是改变旧值和新值之间的任何适用值。如前所述，如果John更改为1,Bob的select选项将更改为2。如果我把苏珊移到2，鲍勃就移到3，玛丽就移到4。

函数的最后一部分(对于n)意味着在进行更改后为选择框的id标签分配一个新值。因此，当John的值改为1,Bob的值改为2时，id分别更新为sortorder1和sortorder2。

谁能告诉我我在这里做错了什么?我是不是走错路了?我觉得我已经很接近了，但我不能完全结束这一切!

function changeField(newval, oldval, maxfield, fieldid) {
    var val = newval.value;
    var oldval = Number(oldval);
    var maxfield = Number(maxfield);
    for (var i = 1; i <= maxfield; i++) {
        // var curval = Number(document.getElementById("sortorder" + i).value);
        var e = document.getElementById("sortorder" + i);
        var curval = e.options[e.selectedIndex].value;
        if (val < oldval) {
            if (curval >= val && curval < oldval && fieldid != "sortorder" + i) {
                document.getElementById("sortorder" + i).value = curval + 1;
            }
        }
        if (val > oldval) {
            if (curval <= val && curval > oldval && fieldid != "sortorder" + i) {
                document.getElementById("sortorder" + i).value = curval - 1;
            }
        }
    }
    for (var n = 1; n <= maxfield; n++) {
        var newfieldid = "sortorder" + document.getElementById("sortorder" + n).value;
        document.getElementById("sortorder" + n).id = newfieldid;
    }
}