Question

我正在创建一些html标签并按如下方式分配数据。

MyCombo = function(args) {
    var dataUrl = args.url;
    var divID = args.divID;
    var div = document.getElementById(divID);

    var myTable = '<input type="text" id="myInput"  list="myUL" onclick = "MyList()" onkeyup="MyList()" style="width:100% " >' +
        '<ul id="myUL" hidden=false>' + '<li>' + '<a href="#" ></a>' + '</li>' + '</ul>';
    div.innerHTML = myTable; 

    function getData(callback) {
        var httpRequest = new XMLHttpRequest();
        httpRequest.open('GET', dataUrl, true);
        httpRequest.onreadystatechange = function() {
            if (httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) {
                callback(httpRequest.responseText);
            }
        };
        httpRequest.send();
    }

    getData(function(data) {
        var jsonc = JSON.parse(data);
        var new_opt = "";
        for (i = 0; i < jsonc.length; i++) {
            new_opt += '<li><a href="#">' + jsonc[i]['VALUE'] + '</a></li>';
        }
        document.getElementById('myUL').innerHTML = new_opt;
    });
}

现在当我通过我的第二个div时，以前的数据会丢失。对于第一个div我得到第二个数据。

这就是我打电话给班级的方式：

首例

var myCombo = new liveSearch({
    "url": "data1.json",
    "divID": "ID1",
});

对于第二个实例

var myCombo2 = new liveSearch({
    "url": "data2.json",
    "divID": "ID2",
});

知道如何克服这个问题吗？

Answer 1

在getData中调用

        document.getElementById('myUL').innerHTML = new_opt;

每次调用时都会写入名为myUL的元素。

Answer 2

追加而不是替换

document.getElementById('myUL').appendChild(new_opt);

或者你可以附加到旧的

old_html = document.getElementById('myUL').innerHTML;
document.getElementById('myUL').innerHTML = old_html+new_opt;

由于新数据，以前的数据会丢失

2 个答案: