我可以只使用一个请求来填充相同的html元素吗？

Posted 2021-04-01

我正在使用ajax向webservice发出请求。

$(document).ready(function(e) {
    var token = "123";
      $.ajax({  
        type: "POST", //REQUEST TYPE
        dataType: "json", //RESPONSE TYPE
        url: "http://ws/mehtod"+token, 
        success: function(data) {
            console.log(data);
            $.each(data, function(i) {
                    $('#list_countries').append("<option>" + data[i].Name + "</option>"); //fILL THE DDL. FOR EACH ITEM RETURNED ADD DATA[NAME] TO ONE LINE OF THE DDL.-
            });
        },
        error: function(err) {
            console.log("AJAX error in request: " + JSON.stringify(err, null, 2));
        }
    }).always(function(jqXHR, textStatus) {
        if (textStatus != "success") {
            alert("Error: " + jqXHR.statusText);
        }
    })
});

问题是：我的html中有多个元素具有ID“list_countries”（它们都是相同的元素，但在页面内的不同面板中）并且我的rerquest工作并且很好地处理数据但是由于某种原因它只是填充其中一个要素。其他人没有填写所要求的数据。这可能是什么原因？谢谢大家。

答案

很可能是因为您多次使用识别器#list_countries。更好地使用类选择器或unical id：

$('#list_countries, #list_countries_2, #list_countries_3');
// or
$('.list_countries');

另一答案

试试这个：

$('#list_countries').each(function() {
    $(this).append("<option>" + data[i].Name + "</option>");
});

另一答案

您正在使用的选择器告诉jQuery以内部方式使用本机document.getElementById()方法来获取DOM，它只返回页面中出现的与选择器匹配的第一个节点，而不管任何其他具有相同ID的节点。所以，你必须强制jQuery不使用本机document.getElementById()方法，这是一个技巧：

$.each(data, function(i) {
    $('body #list_countries').append("<option>" + data[i].Name + "</option>");
});

请注意body之前的#list_countries，这里我们强制使用Sizzle来代替document.getElementById()方法。

PS：我强烈建议您对不同的元素使用相同的class，而不是页面中必须唯一的ID。