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

Question

我正在使用 ajax 向网络服务发出请求。

$(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”(它们都是相同的元素，但在页面内的不同面板中)并且我的请求可以正常工作并很好地处理数据，但对于一些原因是它只填充其中一个元素。其他人不填写请求的数据。这可能是什么原因？提前谢谢大家。

Answer 1

很可能是因为您多次使用identificator #list_countries。更好地使用类选择器或 unical ids:

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