通过 Ajax 添加后如何获取数据列表内容？答案

【问题标题】：how can I get a datalist contents after adding them via Ajax?通过 Ajax 添加后如何获取数据列表内容？
【发布时间】：2021-06-21 19:24:13
【问题描述】：

我有一个带有数据列表选项的输入字段，在更改其他字段后通过 AJAX 更新它的建议。

我尝试将新选项添加到数据列表中，因为提出了其他问题：

$("#add_option").change(function(){
   var _opt_opt_name_val = $(this).val();
   var opt_name_url=_url+"?opt_name="+escape(_opt_opt_name_val);
   var _values_datalist_id = $("#opt_values").attr("list")
   var _value_html = "";
   $.get(opt_name_url,function(data){
       $(_values_datalist_id).empty();
       $.each(data, function(key, v){
           _value_html += '<option value="' + v.value + '"></option>';
       });
       $(_values_datalist_id).append(_value_html);
       console.log("added code: "+$(_values_datalist_id).html());
   });
});

由于它不起作用，我想检查（阅读）通过此 javascript 附加的内容。尝试了 $("#element").text() 和 .html()。两者都返回undefined。

在这种（或任何）情况下，我如何检索数据列表内容？我的意思是调试。

【问题讨论】：

标签： javascript html jquery datalist

【解决方案1】：

同样，在解决了这个问题 3 天之后，我有了一个洞察力：

我混合了用于 Ajax 部分的 JQuery 和用于添加新选项的 Vanilla Javascript。不是很优雅，但到目前为止工作：

$("#add_option").change(function(){
    var _opt_opt_name_val = $(this).val();
    var opt_name_url=_url+"?opt_name="+escape(_opt_opt_name_val);
    var _values_datalist_id = $("#opt_values").attr("list")
    $.get(opt_name_url,function(data){
        var _datalist=document.getElementById(_values_datalist_id);
        _datalist.innerHTML = "";
        $.each(data, function(key, v){
            _datalist.innerHTML += '<option value="' + v.value + '"></option>';
        });
    });
});

这解决了我今天遇到的问题。也许这可以帮助任何有类似问题的人？（虽然我仍然不知道如何通过 jQuery 获取数据列表选项）。

【讨论】：