旧的JavaScript如何对列表项进行排序

Question

我一直使用这段代码来对列表中的项目进行排序，然后将顺序提交回数据库。

但是这段代码在Firefox或Chrome中无法正常工作。它会跳动，然后清除列表的内容。自从2002年以来一直在IE中很好地工作..

var list;

function moveUp() {
    list = document.forms[0].lists;
    var index = list.selectedIndex;

    if (index > 0) {
        var item = list.options[index];
        list.remove(index);
        list.add(item, index - 1);
    }
}
function moveDown() {
    list = document.forms[0].lists;
    var index = list.selectedIndex;

    if (index > -1 && index < list.options.length - 1) {
        var item = list.options[index];
        list.remove(index);
        list.add(item, index + 1);
    }
}
function doSubmit() {
    var s = "";
    list = document.forms[0].lists;
    for (var i = 0; i < list.options.length; i++) {
        s += list.options[i].value + " ";
    }

    document.forms[0].order.value = s;
    return false;
}

- webb

---

我没有看到你在哪里调用 moveUp 或 moveDown 函数... - Martin

你有这个操作的HTML示例吗？最好附带一些虚拟数据进行测试。 - David Mårtensson

你是从哪里调用 doSubmit() 的？是从表单提交事件还是从 javascript:... 链接？ - Gabriele Petrioli

Answer 1

问题出在list.add(item,index)上，这是非标准的，只能在IE中使用。对于Chrome和Firefox，您应该使用document.createElement("option")创建一个选项元素。可以参考这里的示例代码。

- Suresh Kumar

Answer 2

list.add(item, index + 1);

HTMLSelectElement#add方法的第二个参数应该是一个兄弟选项，而不是索引。不幸的是，IE的add()方法没有实现这个标准。在IE8标准模式下会发生改变。

为了避免这个问题，你可以使用老式的insertBefore方法。

- bobince

Answer 3

在Firefox或Chrome中未定义document.forms [0] .lists。我不确定这是什么，但如果它们不支持它，那么它可能是IE使用的非标准命名约定。

最好通过使用document.getElementById（）获取对列表的访问并为该列表指定id值。

以后参考，在Firefox中进行调试非常容易使用Firebug，如果您想进行Javascript开发，请查看它。

- robbrit

---

这并没有回答问题。document.forms[0].lists是文档第一个表单中名为“lists”的字段。从代码来看，它实际上是一个<select>元素。document.forms是只读的HTMLCollection，就像document.images一样。http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-1689064 - gblazex

啊，你说得对！糟糕。好的，在修复了那个问题之后，我遇到了一个异常，但是似乎其他人都正确回答了它 ;) - robbrit