如何更新现有数据列表 jQuery 对象的值？

问题描述

函数 addDataList() 将数据列表添加到现有的 DOM（输入文本）元素。

示例：添加一些值：

addDataList('my_input',[1,2,3,4,5]);

如果数据列表已经存在，则必须删除其选项并添加新选项。

addDataList('my_input',[6,7,8,9,10]);

第一次调用addDataList()，选项被添加，没有错误发生。 第二次调用导致错误：

未捕获的类型错误：datalist.appendChild 不是函数

我在这里做错了什么？

function addDataList(i,a) {

    var id = i + "_datalist";
    var datalist = $('#' + id);
    if (datalist.length == 0) { // datalist does not exist
        var datalist = document.createElement('datalist');
        datalist.id =  id;
        document.body.appendChild(datalist);
    } else {
        datalist.html(''); // datalist exists,clear existing options
    }

    a.forEach(function (data) {
        var option = document.createElement('option');
        option.text =   data;
        datalist.appendChild(option);
    });
    
    $('#' + i).attr('list',datalist.id).attr('autocomplete','off');

}

解决方法

修复了它。 datalist 是一个 jQuery 对象。

function addDataList(i,a) {

    var id = i + "_datalist";

    var datalist = document.getElementById(id);
     
    if (!datalist) { // datalist does not exist
        var datalist = document.createElement('datalist');
        datalist.id =  id;
        document.body.appendChild(datalist);
    } else {
        datalist.innerHTML = '' // datalist exist,clear existing options
    }

    a.forEach(function (data) {
        var option = document.createElement('option');
        option.text =   data;
        datalist.appendChild(option);
    });
    
    $('#' + i).attr('list',datalist.id).attr('autocomplete','off');

}