0

我有一个有效的 Ajax 调用和填充数据列表的函数。datalist 用于从有限列表中选择添加到页面上的 UL 元素。一旦我将数据列表中的一个添加到实际列表中，我想从数据列表中删除该选项。我使用的蛮力方法是清除数据列表并重新填充它。

function populate_datalist_from_array(list_id, list_str)
{
    clearChildren( list_id );
    var arr = eval ( list_str );
    for (var i = 0; i < arr.length; i++) {
        var opt = document.createElement('option');
        opt.innerHTML = arr[i];
        opt.value = arr[i];
        document.getElementById(list_id).appendChild(opt);
    }
}

function clearChildren( parent_id ) {
    var childArray = document.getElementById( parent_id ).children;
    if ( childArray.length > 0 ) {
        document.getElementById( parent_id ).removeChild( childArray[ 0 ] );
        clearChildren( parent_id );
    }
}

我已验证该list_str对象是正确的。即，它仅包含当前列表中尚未包含的选项。但是在populate_datalist_from_array使用该新列表调用后，下拉列表中的数据列表不会改变。这是因为浏览器基本上已经编译了所有存在的值（就像它是一个普通的、基于浏览器的自动完成）并且没有“忘记”我想要删除的值？

4

2 回答 2

1

Teemu 的 JsFiddle 工作正常。但是，通常最好避免递归，以及在不需要时避免多次 DOM 查询。

这是一个只需要一个 DOM 查询的编辑，并且是迭代的。（注意在索引之前递减，因为这是一个从零开始的列表）

    clearChildren = function (parent_id) {
        var parent = document.getElementById(parent_id);
        var childArray = parent.children;
        var cL = childArray.length;
        while(cL > 0) {
            cL--;
            parent.removeChild(childArray[cL]);
        }
    };

（在 MacBookPro 上的 JSFiddle 中，我在 500 个元素的列表中节省了 10 毫秒——总共 15 毫秒——但在移动设备上使用更大的 DOM 可能会更加引人注目）。

于 2015-05-22T09:28:32.073 回答
0

如果list_str真的没问题，你的代码就可以工作。你可以在jsFiddle检查它。

您描述的行为的最普遍原因是您的代码刷新了页面。如果您type="button"从链接的小提琴中的“更改选项”按钮中删除，您会收到一个错误（由于小提琴本身）。在您的页面中，您可能有类似的调用populate_datalist_from_array()。请注意，点击Enter活动文本输入也会提交/刷新。

于 2013-08-02T11:00:28.153 回答